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HTML/CSS 基础 知识 
罗列 一 些 基础 内 容 。 
学 习 资 料 可 以 参考 HTML Dog 以 及 Learn HTML & CSS, 


详细 的 文档 内 容 ， 推 荐 参考 WebPlatform 和 MDN。 


关于 属性 的 兼容 性 ， 可 以 通过 Can | Use 查 询 。 


HTML/CSS 基 础 
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nih 一 AK 
HTML 单 用 标签 
div 
div 标 签 用 于 组 合 其 他 HTML 元 素 ， 本 身 无 实在 意义 。 常 用 于 页 面 的 布局 ， 比 如 一 个 展开 式 的 广告 页 面 框架 大 致 如 下 : 


<body> 
«div id-"wrap-container"» 
«div id-"collapsed-container"2«/div» 
«div id-"expanded-container"»«/div» 
</div> 
</body> 


h1~h6, p, span, strong, em... 


此 类 标签 用 于 设置 文本 ， 常 见 的 使 用 方式 是 填充 段落 ， 比 如 弹出 的 legal 框 文字 HTML 结 构 如 下 : 


«div id="legal-window"> 

<h4>LEGAL</h4> 

«img id="legal-close" src="img/embed/legal-close.png" alt="close window"> 

<p>*Requires a system with Intel<sup>&reg;</sup> Turbo Boost Technology. Intel<sup>&reg;</sup> Turbo Boost Technolc 
</div> 





ul, li, ol, dl, dt, dd 
lt X s FETA DURAS, DAD HELISESRHESER, Pop SMS: 


«ul class-"nav-tools-list"» 


«li» 
«div» 
«img src-"shoppingtools-icon-1.png" alt=""> 
«span»Build & Price</span> 
</div> 
«/li» 
«li» 
«div» 
«img src-"shoppingtools-icon-2.png" alt=""> 
«span»Incentives & Offers«/span» 
</div> 
</li> 
«li» 
«div» 
«img src-"shoppingtools-icon-3.png" alt=""> 
«span»Request a Local Quotec/span» 
</div> 
«/li» 
«li» 
«div» 
«img src-"shoppingtools-icon-4.png" alt=""> 
«span»Search Dealer Inventoryc/span» 
</div> 
</li> 
</ul> 
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form 表 单 相 关 


页 面 中 涉及 到 表单 时 候 ， 需 要 使 用 到 form 相 关 标 签 : 


«form namez"frm-sample" class-'"frm-sample" actionz"try" method-z"post"» 
«input type="text" class-"form-control" placeholder-"Name"» 
«div id-z"status-message"»«/div» 
«div id-"sample-captcha"»«/div» 
«a id-"check-is-filled" class-"info-btn"2Check if visualCaptcha is filled«/a» 
«button type="submit" namez"submit-bt" class-"submit"»Submit form</button> 
«/form» 


table 表 格 相关 


页 面 中 涉及 到 table 结 构 ， 需 要 使 用 到 table 相 关 标 签 : 


<talbe></talbe> 


img, canvas 


用 于 图 像 星 示 。 一 般 不 直接 操作 img,canvas 元 素 ， 而 是 在 它 的 外 层 包 衰 一 层 父 级 元 素 (可 以 为 span,div 等 )， 对 父 级 元 素 进行 
操作 : 


«div class-"preload" data-src-"CheddarBacon.png"» 
«img src-"CheddarBacon.png" alt=""> 

</div> 

a1 e 

«div id-"sprite-car" class="cw-sprite sprite-car" cw-interval="30" cw-loops="1" cw-auto-play="false" cw-texture-"image: 
<canvas class="cw-renderer" width="460" height="130"></canvas> 

</div> 


B E) 





a 


a 标签 用 于 打开 链接， 发 送 邮 件 ， 段 落 跳 转 等 功能 。 使 用 时 需要 注意 阻止 掉 标签 的 默认 事件 。 


链接 跳 转 ， 常 见 的 关于 分 享 按钮 的 HTML 结 构 如 下 : 


«div id="shareBox"> 
«ul» 
«li id-"facebook"» 
«a target="_blank" rel="nofollow" data-shareWay-"facebook"» 
«img alt-"Post on Facebook" src-"img/embed/f4Icon3.png" alt-"Facebook" /> 
</a> 
«/li» 
«li id-"twitter"» 
«a target="_blank" rel="nofollow" data-shareWay-"twitter"» 
«img alt-"Tweet this" src-"img/embed/f4Icon4.png" /> 
</a> 
«/li» 
«li id-"pinterest"» 
«a data-pin-do-"buttonPin" data-pin-config-"none" target="_blank" rel="nofollow" data-shareWay-"pinterest": 
«img alt-"Pin it" src-"img/embed/f4Icon5.png" /> 
</a> 
«/li» 
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«li id="email"> 
«a target="_blank" rel="nofollow" data-shareway="email"> 





«img src-"img/embed/f4Icon6.png" /> 
</a> 
«/li» 
«/ul» 
«p»«/p» 


</div> 


LL Bs 


发 送 邮 件 的 代码 片段 如 下 : 


«div class="button"> 
«a class-"mail" data-img-"mail.png" hrefz"mailto:exampleQgmail.com?subjectzxxx&body-xxx"'»«/a» 
</div> 


段落 跳 转 代码 片段 如 下 : 


«div id="html5"></div> 
«a name-"user-content-html5" href="#html5" class-"headeranchor-link" aria-hidden- 


[ls —— — À— n. o—À— 
HTML575 & $ ja 





'true"2«span class-"headeranchor"»«/s[ 





W3School: 点 击 查询 












































































WU pt m Defines inserted text. 
«datalist» Defines a dropdown list ins: E 
a HTML 5 NEW TAG aa cite, datetime mp> Defines sample computer code 
<dd> Defines a definition description : 
TAG NOT SUPPORTED IN HTML 5 " Define a generated key ina form " Defines a definition list 
Defines deleted text. B «keygen» autofocus, challenge, disabled, form, “epi a 
Define a comment <del> R im wm 
Defines a section 
Defines the document type uS EUER PE <kbd> Defines keyboard text B <section> RAS 
ails 
Defines a hyperlink open ere Defines an inline sub window ee 
<a> href, hreflang, media, ping , rel, i i for, form. 
target, type B «dialog» Dafines a dialog (conversation) «select» autofocus; disabled, form, multiple, 
M " «legend» Defines a title in a fieldset name, size 
«abbr» Defines an abbreviation edu». Doim a defüittion terim i E " 
n s Defines a list item «small» fines small text. 
7 . " 
«acronym» Used to define an embedded acronyms <dir> Toad to define a director lst <li> i 
«div» Defines a section in a document. zie B< - Define media roos 
: source: 
«address» Defines an address element TUE Defines a resource reference media, sre, type 
in 
«applet» Used to define an embedded applet sd Defines a deninition tist href, hreflang, media, rel, sizes, type pormang De etn i ont 
Defines an area inside an image map. I pcd Ee STARS Defines an image map <strong> Defines strong text 
<area> i n 
alt, coords, href, hreflang, medina, <em> Defines emphasized text name s 
ping, rel, shape, target, type nes EE ERESSE pw Defines a style definition 
Defines external interactive content or B <mark> efines marked text. y pia 
Defines an article <embed> plugin D. list "m 3 
B <article> fines a menu is 
cite, pubdate light; sre (pe; width «menu» gu iis <sub>, «sup» Defines sub/super-scripted text 
3 bel, type 
i Defines content aside from the page Defines a table 
B <aside> efi fram page Baias Defines a fieldset E Defines meta information <table> pnma 
EEES dianbled, form, name charset, content, http-equiv, name rm eem 
P " fines a table ly 
Bl «audio» pv cul. | Defines a group of media content, and their Defines measurement within a predefined <tbody> pores 
Y > caption E <mctery range z 
sp Duis Dol rent fou» Used to define font face, font size, and font. high, low, max, min, optimum, value cuit Defines a table cell 
color of text RUM 
Defines a base URL for all the links in a Ta AA A B <nav> Defines navigation links colspan, headers, rowspan 
<base> page E «footer Defines a footer for a section or page qum T Tum Defines a text area 
i Used to display text for browsers that do 
href, target i <noframes> not handie frames: autofocus, cols, disabled, form, 
COFA Used to define a default font-color, font- E i e me 一 ftextareas: maxlength, name, placeholder, 
n Ee Orfea jur a di idt «form» pee e pi Ua «noseript» Defines a noseript section po UE uS 
m Defines the direction of text duplay target Defines an embedded object 二 二 
«tfoot», 
dir RON Used to define one particular window «object» data, form, height, name, type, mad Defines a table footer / head. 
= (frame) within a frameset usemap, width <thead> 
<big> Used to make text bi 
- frameset> Used to define a frameset, which organized ES Defines an ordered list "wu Defines a table header 
«blockquote» DU diee LLL multiple windows (frames) reversed, start colspan, henders, rowspan, scope 
cite : 
- «hi» to<h6> Defines header 1 to header 6 ETE Ties nonton a EOM Defines a date/tim 
<body> ss ime 
ly Defugs tke body Seni <head> Defines information about the document Jabel, disabled daime 
<br> Inserts a single line break Baada E EI EEEE "m Defines an optio in d drop-down lit «title» Defines the document title 
APA DUE disabled, label, selected, value. 5 
Deiner pa KH acu. Defines information about a section in a PON Defines a table row 
i autofocus, disabled, form, ENSE document. Defines some types of output. datetime 
<button> formaction, formenctype, @ <output> für, fus 
P Ebr i <hr> Defines a horizontal rule for, form, name <tt> Used to define teletype text 
formtarget, name, type, val " ee 
formtarget, name, type, val pue [wee <p> Defines a paragraph <u> Used to define underlined text 
Bis Defines graphics manifest, xmlns Defines a parameter for an object cuis RE 
height, width -— «param» : 
€ Defree oio et Teo <var> Defines a variable 
<caption> Defines a table caption 
Defines an inline sub window omes Don preiarai tut EEEE 
«center» Used to center align text and content «iframe» : . F 
height, name, sandbox, seamless, sre PERS Defines progress ofa task of any kind B <video> ole lh cole 
«cite» Defines a citation A max, value height, loop, sre, width 
Defines an image 
todas Defines computer code text «img» Y TE fi iur € Defines a short quotation. 
autobuffer, autoplay, controls, sre ty erc, eight Temp, maemiap, wh cite 
Defines an input field 
«col» Defines attributes for table columns ý Used in ruby annotations to define what to 
accept, alt, antocomplete, autofocus, E <rp> show browsers that to not support the ruby HTML5 TAG CHEAT SHEET 
pcm Defines groups of table columns checked, disabled, form, formaction, element 
: for 5 
span «input» eto Defines explanation to ruby annotations Created by WebsiteSetup.org 
Defines a command button , max, maxlength, y 
Bl csont dud RU TRE a name, pattern, placeholder, readonly, srüby» Donee rur annotations 
DA Fomine aiaa pesi te tyre vale, <s>, <strike> el dae ro te 


HTML% H 














前 端 工程 病 手 册 





HTML 语 义 化 
语义 化 的 含义 就 是 用 正确 的 标签 做 正确 的 事情 ，html 语 义 化 就 是 让 页 面 的 内 容 结构 化 ， 便 于 对 浏览 器 、 搜 索引 擎 解析 ; 在 没 


有 样式 CCS 情 况 下 也 以 一 种 文档 格式 显示 ， 并 且 是 容易 阅读 的 。 搜 索引 擎 的 息 虫 依赖 于 标记 来 确定 上 下 文 和 各 个 关键 字 的 权 
重 ， 利 于 SEO。 使 阅读 源 代码 的 人 对 网 站 更 容易 将 网 站 分 块 ， 便 于 阅读 维 扩 理 解 。 


e MAS 
参考 资料 


«^ 


e semantic-html 
e 关于 语义 化 HTML 以 及 前 端 架构 的 一 点 思 
e 如 何 理解 web 语义 化 


HIMEL 语 义 化 
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DOCTYPE 和 浏览 器 泻 染 模式 


文档 类 型 ， 一 个 文档 类 型 标记 是 一 种 标准 通用 标记 语言 的 文档 类 型 声明 ， 它 的 目的 是 要 告诉 标准 通用 标记 语言 解析 器 ， 它 应 
该 使 用 什么 样 的 文档 类 型 定义 (DTD) 来 解析 文档 。Doctype 还 会 对 浏览 器 的 泻 染 模 式 产 生 影响 ， 不 同 的 泻 染 模 式 会 影响 到 
浏览 器 对 于 CSS 代码 甚至 JavaScript 脚本 的 解析 ， 所 以 Doctype 是 非常 关键 的 ， 尤 其 是 在 IE 系列 浏览 器 中 ， 由 DOCTYPE 
所 决定 的 HTML 页 面 的 泻 染 模式 至 关 重要 。 


浏览 器 解析 HTML 方 式 
有 三 种 解析 方式 : 
e 非 怪 异 (标准) 模式 
e 怪异 模式 
e 部 分 怪异 (近乎 标准 ) 模式 
在 “标准 模式 "(standards mode) 页 面 按照 HTML 与 CSS 的 定义 泻 染 ， 而 在 “怪异 模式 (quirks mode) 模式 "中 则 尝试 模拟 更 旧 
的 浏览 器 的 行为 。 一 些 浏览 器 (例如 ， 那 些 基于 Mozilla 的 Gecko 泻 染 引擎 的 ， 或 者 Internet Explorer 8 在 strict mode 
F) 也 使 用 一 种 党 试 于 这 两 者 之 间 妥 协 的 “近乎 标准 "(almost standards) 模式 ， 实 施 了 一 种 表单 元 格 尺 寸 的 怪异 行为 ， 除 此 之 
外 符合 标准 定义 。 
一 个 不 含 任何 DOCTYPE 的 网 页 将 会 以 怪异 (quirks) 模式 泻 染 。 


HTML5 提 供 的 <pocTYPE html> 是 标准 模式 ， 向 后 兼容 的 , 等 同 于 开启 了 标准 模式 ， 那 么 浏览 器 就 得 老 老 实 实 的 按照 W3C 的 标 
准 解析 泻 染 页 面 ， 这 样 一 来 ， 你 的 页 面 在 所 有 的 浏览 器 里 显示 的 就 都 是 一 个 样子 了 。 


e a 
参考 资料 


e DOCTYPE 和 浏览 器 演 染 模式 
e CS002: DOCTYPE 与 浏览 器 模式 分 析 
e 怪异 模式 (Quirks Mode) 对 HTML 页 面 的 影响 
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理解 DOM 结 构 


DOM: Document Object Module, 文档 对 象 模型 。 我 们 通过 JavaScript 操 作 页 面 的 元 素 ， 进 行 添加 、 移 动 、 改 变 或 移 除 的 方法 
和 属性 , 都 是 DOM 提 供 的 。 


W3C DOM 75; 


被 分 为 3 个 不 同 的 部 分 : 


e 核心 DOM - 针对 任何 结构 化 文档 的 标准 模型 
e XML DOM - 针对 XML 文档 的 标准 模型 
e HTML DOM - 针对 HTML 文档 的 标准 模型 


DOM 节 点 


根据 W3C 的 HTML DOM 标准 ，HTML 文档 中 的 所 有 内 容 都 是 节点 : 


e 整个 文档 是 一 个 文档 节点 

e 每 个 HTML 元 素 是 元 素 节 点 

e HTML 元 素 内 的 文本 是 文本 节点 
e 每 个 HTML 属性 是 属性 节点 

e 注释 是 注释 节点 


HTML DOM 节点 树 


HTML 文 本 会 被 解析 为 DOM 树 , 树 中 的 所 有 节点 均 可 通过 JavaScript 进行 访问 。 所 有 HTML 元 素 (PA) 均 可 被 修改 ， 也 可 
以 创建 或 删除 节点 。 





节点 的 关系 


父 (parent) 、 子 (child) 和 同胞 (sibling) 等 术语 用 于 描述 这 些 关 系 。 父 节点 拥有 子 节点 。 同 级 的 子 节点 被 称 为 同胞 〈 兄 
弟 或 姐妹 ) : 
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e 在 节点 树 中 ， 顶 端 节点 被 称 为 根 (root) 

e 每 个 节点 都 有 父 节点 、 除 了 根 ( 它 没有 父 节点 ) 
e. 一 个 节点 可 拥有 任意 数量 的 子 

e 同胞 是 拥有 相同 父 节 点 的 节点 













parentNode 


根 元 素 : 


«html 








TE 


<head> 





<html> 的 子 节点 
同时 ， 彼此 互 为 同胞 


nextSibling 
Bui[qissnors ead 





lastChild AE: 
<body> 


~ MN 
参考 资料 


e W3C: Document Object Model (DOM) Technical Reports 
e MDN: DOM API 

e 浏览 器 的 工作 原理 : 新 式 网 络 浏览 器 幕后 揭秘 

e 开发 者 需要 了 解 的 WebKit 

e 理解 WebKit 和 Chromium: HTML 解 析 和 DOM 

e. HTML 解 析 原 理 


理解 DOM 结 构 
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HTML5 新 增 内 容 


HTML5 是 对 HTML 标准 的 第 五 次 修订 。 其 主要 的 目标 是 将 互联 网 语义 化 ， 以 便 更 好 地 被 人 类 和 机 器 阅读 ， 并 同时 提供 更 好 
地 支持 各 种 媒体 的 嵌入 。HTML5 的 语法 是 向 后 兼容 的 。 现 在 国内 普通 说 的 H5 是 包括 了 CSS3, JavaScript 的 说 法 (严格 意 
义 上 说 ， 这 么 叫 并 不 合适 ， 但 是 已 经 这 么 叫 开 了 ， 就 将 错 就 错 了 ) 。 


与 HTML 4 的 不 同 之 处 


e 文件 类 型 声明 («IDOCTYPE») 仅 有 一 型 : <IDOCTYPE HTML>。 

e 新 的 解析 顺序 : 不 再 基于 SGML。 

e 新 的 元 素 : section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, 
figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。 

e input 元 素 的 新 类 型 : date, email, url 等 等 。 

e 新 的 属性 : ping (用 于 a 与 area) , charset (用 于 meta) , async (用 于 script) 。 

e 全 域 属性 : id, tabindex, repeat, 

e 新 的 全 域 属性 : contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck, 








e 移 除 元 素 : acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt, 


新 增 标签 


HTML 5 提供 了 一 些 新 的 元 素 和 属性 ， 反 映 典 型 的 现代 用 法 网 站 。 其 中 有 些 是 技术 上 类 似 <div> 和 «span» 标签 ， 但 有 一 定 含 
义 ， 例 如 «nav» (网 站 导航 块 ) 和 «footer» «audio» 和 «video» 标记 。 


移 除 的 标签 


一 些 过 时 的 HTML 4 标记 将 取消 ， 其 中 包括 纯粹 用 作 显 示 效 果 的 标记 ， 如 «font» 和 «center» ， 因 为 它们 已 经 被 CSS 取 代 。 还 
有 一 些 通过 DOM 的 网 络 行为 。 


修改 的 标签 
尽管 和 SGML 在 标记 上 的 相似 性 ，HTML5 的 句法 并 不 再 基于 它 了 ， 而 是 被 设计 成 向 后 兼容 对 老 版 本 的 HTML 的 解析 。 它 有 一 


个 新 的 开始 列 看 起 来 就 像 SGML 的 文档 类 型 声明 ， <!pocTYPE HTML> ， 这 会 触发 和 标准 兼容 的 泻 染 模 式 。 在 2009 年 1 月 5 号 ， 
HTML5 添 加 了 Web Form 2.0 的 内 容 ，html5 开 始 发 展 起 来 。 


无 障碍 (Accessibility) 








为 了 使 HTML5 的 新 元 素 或 新 属性 获取 最 大 化 的 兼容 性 ， 开 发 人 员 需 要 附加 一 点 额外 补助 ， 或 者 有 些 特 性 根本 没有 被 任何 浏览 
器 实现 ， 或 者 浏览 器 根本 不 支持 补助 技术 。 因 此 有 些 特殊 的 HTML5 特 性 根本 不 能 使 用 。 更 多 细节 可 参见 HTML5 
Accessibility (无 障碍 ) 


新 应 用 程序 接口 (API) 


除了 原先 的 DOM 接 口 ，HTML5 增 加 了 更 多 样 化 的 API: 


e HTML Geolocation 
e HTML Drag and Drop 
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HTML Local Storage 


HTML Application Cache 


HT 由 是 一 门 语言 ， 提 供 一 种 
建立 结构 文档 的 方法 ， 通 过 表 
示 结 构 性 的 语法 创建 诸如 标题 
， 段 落 ， 列 表 ， 链 接 ， 引 用 以 
及 其 他 的 文本 





么 可 以 支持 HTML5 


你 在 现在 使 用 的 浏览 器 体验 过 
HTML5 的 新 特性 了 么 ? 

不 同 的 牌子 和 版 本 ， 每 个 浏览 
器 有 自身 的 规则 和 特性 ， 每 个 
浏览 器 对 HTML5 的 支持 率 不 同 
看 看 每 个 浏览 器 对 HTML5 的 支 
持 情 况 ， 以 及 他 们 怎么 在 未 来 
提高 支持 


HTML 准 备 


mu 




























HTML Web Workers 
HTML SSE 
HTML Canvas/WebGL 
HTML Audio/Video 
2+ 
i 
后 奉 上 一 张 图 片 : 
< 是 什么 东 东 ， 
HTMLS mast: >T m 本 的 mT IEE 
开发 。 这 代码 现在 可 以 带 来 新 
为 什么 要 关注 它 /> 能 ， 给 开发 人 员 和 网 络 用 户 都 带 
来 极 大 利好 1 画布 元 素 可 以 用 于 泻 染 图 形 ， 计 2 以 前 嵌入 一 个 视频 ， 不 使 用 诸如 
HTML5 引 入 了 一 系列 的 新 元 素 和 局 [sa 戏 图 像 ， 或 者 其 他 视觉 图 片 qu Miedo bos Flash 
是 什么 ? 性 ， 一 下 是 其 中 一 些 重 要 的 : 所 有 这 些 不 项 要 插件 i : 








得 冀 于 视频 元 素 ， 现 在 已 经 成 
为 可 能 。 成 为 在 线 视 频 的 新 标准 
是 创造 者 们 的 热切 希望 


可 能 性 将 永 无 止境 





















嗅 探 用 户 的 位 置 在 网 络 已 经 不 是 新 4 高 线 网 路 程序 允许 用 户 妈 使 
— 鲜 事 ， 实 际 上 ， 大 部 分 网 站 已 经 通 断 网 的 情况 下 继续 使 用 交互 的 
对 于 你 来 说 会 是 怎么 回 过 1P 地 址 来 探测 用 户 位 置 。 但 这 个 网 络 程序 和 文档 。 比 如 用 户 可 


事 ? 你 会 注意 到 那些 每 天 
的 网 络 活动 如 上 传 YouTube 
视频 到 Blog， 在 手机 浏览 器 上 
找 特 别 的 商店 变 得 更 加 容易 。 这 


TEREN HTWML5 的 地 理 定位 

一 个 精确 定位 用 户 的 替代 方法 
新 思路 是 过 WiFi 发射 诺 和 GPS 获 
取 定 位 信息 


以 本 地 查看 邮件 ， 无 需 连 接 网 
络 或 者 安装 额外 的 邮件 客户 端 





HTML5 VS FLASH 谁 会 在 交互 式 未 来 胜出 ? 


你 EMRRHM A ERR 
都 是 由 HTML 所 建 .HTML 一 














E 
o 

$ 
[::] 
[ci 
$e 
£ 
E: 
El- 
E 
z 
3B 























SIEG AH 


Adobe 一 个 战略 上 的 威胁 ， 


微软 和 Java 也 是 如 此 ， 
HRE. JAER! 











意味 着 你 会 在 一 个 轻 量 级 的 便携 的 ， 
普遍 通用 的 平台 上 有 丰富 的 体验 地 理 定位 
.9 
mees O momens @ JERES G xs: G bre e 555 不 支持 
在 不 同文 档 之 间 可 以 添加 ， 编 辑 ， 可 格式 化 元 素 就 通过 类 名 可 以 PERM 允许 用 户 无 需 插 
可 以 互 发 信息 删除 文本 ， 图 片 是 可 以 使 用 CSS 获得 DOM 对 象 和 Bn 
和 其 他 新 元 素 的 元 素 
Q irast @ arren Q oss @ sss Q szent Q musnuse 未 知 支持 
Javascript 可 可 以 在 画布 元 素 在 页 面 随意 拖 动 选择 某 些 页 面 组 扩展 了 表单 选项 ， 在 HTWL 文 档 直接 
动态 生成 图 形 上 显示 文字 的 方 和 放置 元 素 的 接 存 ， 从 而 可 离线 增加 如 日 期 选择 ， 使 用 SVG 标签 的 
法 【函数 接口 ) 口 使 用 滑动 条 方法 
HTML5 的 特性 兼容 (目前 情况 ) 性 能 情况 
si MEN E cc. l B E 
ws | MENMNNEBEENH E …… :BHEBBHEBBEEU 
^.  HENEBENHEHB ---—- :BEBNBEBEE 
^» l| mEMNEBENHEHB -£ X39—:HEBBEBHNBEB 
» | mNENMNHEB E … O) SEHEBBEB E 
B 5» E steak 哪个 更 多 支持 D 中 个 更 高 效 GENE. Fah 
面 则 更 优胜 
然而 ，HTML 是 网 络 简单 交互 
x Ku FK x x Eu HTML 的 未 来 。 它 增加 了 图 表 ，3D 
矢量 图 形 ， 图 片 变形 ， 视 频 
和 音频 
DE. b T; 寺 效 B 
0515 okt @ 特效 @ 特效 OAR @ 无 限 @ 高 效 全 网 生生 的 
Flash 播 放 器 是 免费 的 ， ”Falsh 可 以 做 很 多 很 高 级 。 Flash 被 流行 的 iphone 和 在 Mac 和 Windows 的 测试 ， j ae, : 
ER eS m dier zip one Flach EQHTNL S48 Hi AJER Ler oht Java) 的 依 
W E CUT NES FPERRA 不 一 样 ， 因 而 不 分 胜 负 EN 
，HTML 不 属于 任何 ， Google ashk 这 些 iki b. R 
司 ” 淮 都 可 以 用 文本 编辑 “ 现 Qnail 的 多 文件 上 传 。 成 HTWL5 由 浏览 器 解析 执行 BREEN AR. gi ESRRADES E, TE 
这 信用 这 些 技术 ， 对 开发 二 上 万 的 Flash 游 戏 在 表 TEREE. MUDA ”的 程序 消耗 的 资源 很 低 ， — SODIU AOURQD RUSSE 
人 员 和 用 户 都 是 免费 的 。 现 方面 也 是 HTML5 望 尘 英 。 成 了 一 个 标准 并 被 广泛 的 MAA RAMES I acht 会 使 用 。 可 能 在 长 远 的 未 来 
及 的 接受 序 都 是 比较 简单 的 HTML5 会 符合 所 有 要 求 


Sovces: Due rio HTMS | Cn cori deme corn | Garer | vécu | feu est Vin | Fech Crunch | Wipes 


` WN 
参考 资料 


HTML5 新 增 内 容 


中 文 版 组 译 ，mazingtech. com ( 美 芯 笠 技 ) 
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e 维基 百科 : html5 

e MDN: HTML5 

e W3Schools: Learn HTML5 
e 知 乎 : HTML5 到 底 是 什么 ? 
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常用 CSS 属 性 























前 端 了 
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常用 的 CSS 导 性 列表 汇总 


REEF ; SRN 
REPREC : imooc-com 





TURAE R GAARNE , BESIEN , IE 
好 发 上 来 也 给 大 家 分 椰 一 下 。 
和 格 如 石 列 的 数字 标识 支持 的 CSS 邓 全 版 本 。 


01. CSSS (Background) 
Ld 
background : PARREREN AANS EL 


background-attachment : 设 秆 少时 图 像 是 否 国定 或 者 
有 着 页 面 的 振作 部 分 深 动 1 


background-color : iRETEERUSSRUREST 
background-image : i&EzcikRérse 
background-position : SEEMS Teu 
background-repeat : 设 得 是 百 及 如 何 至 氮 背 时 图 像 





border ; 在 一个 声明 中 该 呈 所 有 的 边框 属 性 1 
border-bottom : 在 一 个 声明 中 设置 所 有 的 下 边框 局 性 1 
border-bottom-color ; 设 理 下 边框 的 需 色 2 
border-bottom-style : 设置 下 边框 的 样式 2 
border-bottom-width : RE THERES 
border-color : BEng 

border-left : 在 一 个 声明 中 设置 所 有 的 左边 框 属性 1 
border-left-color : REHE 
border-left-style : REDEN 
border-left-width : REAVER 
border-right ; E-PAPER REEERE 
border-right-color : 设 委 厂 边框 的 新 色 2 
border-right-slyle : REHITA? 

border right-width : intent 
border-style : REREH 

border-top : 在 一 个 声明 中 设 于 所 有 上 边 杜 的 后 性 1 
border-top-color : 设 各 上 边框 的 颜色 2 
border-top-style : 设置 上 边框 的 样式 2 
border-top-width ; RE 上边 性 的 这 应 1 
border-width ; 设 豆 四 条 边框 的 次 1 

outline : 在 一 个 声明 中 设 矢 所 有 的 轮 杰 居 性 2 
outline-color : Eegent 

outline-style : Ett 

outine -width : RESERTSE 





03. Css 广 本 后 性 (Text) 

局 性 与 描述 

color : BEAMS 

direction : 规定 文本 的 方向 /书写 方向 2 
letter-spacing ; REPRESI 
line-height : E551 

text-align : 规定 文本 的 水 平 对 齐 方式 1 
text-decoration : 规定 添加 到 文本 的 装饰 效果 1 
text-indent : AERA HRERL 
text-shadow : 规定 源 加 文本 的 阴 彩 歼 果 2 
text-transform : 控制 文本 的 大 小 写 ] 
unicode-bidi : 设置 文本 方向 2 
white-space ; 规定 如 何 隶 理 元 素 中 的 空白 1 
word-spacing : B2801 





04. CSs 字 体 届 性 (Font) 

属性 与 描述 

font : 在 一 个 声明 中 设置 所 有 字体 居 性 1 
font-family 规定 文本 的 字体 系列 1 
font-size : 规定 文本 的 字体 尺 二 1 
font-size-adjust : 为 元 京 规定 aspect 信 2 
font-stretch : 收 和 或 这 伟 当 前 的 字体 系列 2 
font-style : 规定 文本 的 字体 压 实 1 
font-variant : 规定 文本 的 字体 样式 1 
font-weight : 规定 字体 的 组 弓 


05. Css 外 边 距 属性 (Margin) 

属性 与 描述 

margin : 在 一 个 声明 中 设 轩 所 有 的 外 边 旺 居 性 1 
margin-bottom: ETRAFINA 
margin-left ETRNERAEL 
margin-right 设 于 元 素 的 右 外 边 BE1 
margin-top: 设 于 元 的 上 外 边 下 


06. CSHB (Padding) 

BHSE 

padding 在 一 个 声明 中 设置 所 有 的 内 边 耻 局 性 1 
padding-bottom: RETF resins 
padding-left 设 秋元 素 的 左 内 边 下 1 
padding-right REGERE TIE 
padding-top: 设 于 元 来 的 上 内 边 焉 


07. SS 列表 属性 [List 

Ld 

list-style: 在 一 个 声明 中 设置 所 有 的 列 到 局 性 1 
list-style-image: EKRIR E JANE 
st-position: 设 至 列表 项 标记 的 放 室 位 到 1 
list-style-type REARDAN 


08. CSS 尺 寸 导 性 (Dimension) 
后 性 与 描述 

height 设 于 元 来 高度 1 
max-height: 设 置 元 素 的 如 大 高 度 2 
max width RBS RR RE? 
min-heightig EzE NESE 
min-width RETENEN? 
widths Reset 





09. CSS 定 位 属性 (Posi 
属性 与 描述 


bottom RE EURA FARSHE ERTER 
Ll 

dear 规定 元 素 的 哪 一 仙 不 允许 其 他 浮动 元 素 1 

cp 艺 我 绝对 定位 元 素 2 

cursori EE ETATE gua 

display 规定 元 过 应 该 生成 的 框 的 类 型 1 

float 规 定 村 是否 应 该 学 动 1 


left 没 加 羡 位 元 素 左边 下 边界 与 其 包 信 块 左边 界 之 间 的 
LI 

overflow PESAR BETEETAN 

position 规定 元 素 定 位 类 型 2 

Tight i ERERT ACER EDAS ROSENI 
偏 移 2 

top 设置 走 位 元 来 上 外 边 中 边界 与 其 包 名 块 上 边 之 癌 的 仿 
2 

vertical-align PER RNEE R 

Visibility 规 十 元 素 屋 百 可 见 2 

zinde ETES 


ning) 


10. Css 表 格局 性 (Table} 

属性 与 描述 

border-collapse 规定 是 百合 并 委 格 边框 2 

border-spacing 规定 相 人 单元 格 边 框 之 间 的 下 高 2 

caption-side :规定 雪 格 标 是 的 位 等 2 

empty-cells 规 定 屋 否 旺 示 和 表格 中 的 空 元 客 上 的 边框 和 
LE 

table-layout 设 置 用 于 表格 的 布局 四 法 


ZERE : w3cschool 
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CSS 普 通 流 (文档 流 ) 


首先 明确 一 点 的 是 ，W3C 规 范 中 没有 document flow 这 个 概念 ， 只 有 normal-flow, 文档 流 的 叫 法 主要 还 是 多 数 中 文 译 者 的 翻译 


方式 问 题 。 


什么 是 普通 流 ? 简单 说 就 是 元 素 按照 其 在 HTML 中 的 位 置 顺序 决定 排 布 的 过 程 。 并 且 这 种 过 程 遵循 标准 的 描述 。 


e normal-flow 
e CSS 定 位 机 制 之 一 : 普通 流 


CSS 普 通 流 (文档 流 ) 
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CSS 定 位 方式 


X VAN 
参考 $t 料 


e CSS 相对 | 绝对 (relative/absolute) 定 位 系列 (—) 
e CSS 相对 /绝对 (relative/absolute) 定 位 系列 (二 ) 
e CSS 相对 /绝对 (relative/absolute) 定 位 系列 (三 ) 
e CSS 相对 /绝对 (relative/absolute) 定 位 系列 (四 ) 
e CSS 相 对 定位 | 绝对 定位 (五 ) 之 z-index 篇 


CSS 定 位 方式 
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CSS 选 择 厨 


选择 器 兼容 性 


CSSi3bitün 
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jy 


iPhn Windows XP Mac OSX 


Op Saf 1E7 


FF FF i 
Saf Saf goog FF FF IE8 in IEZ IEG 


Saf4 Saf Saf Saf Op FF FF NS 
Selector 


3.2 3.0 chrm 3.5 3.0 2.0 1.5 9.0 3.0 IEB Beta 3:2. [9:10 £33 [9:645 33. 2:5 zl 


EIE 

E-F 

EFF 
E[attr] 
E[attr=val] 
E[attr~=val] 
E[attr|=val] 
:first-child 
-link 
-visited 
-lang0 
:before 
::before 
:after 
zafter 


:first-letter 


:first-line 


cr MN NN GR ERR RR ER ER 


The following selectors are new to CSS3 (above were in previous versions) 





E[attr^ —val] 
E[attr$ —val] 
E[attr* —val] 
E-F 

:root 
:last-child 
:only-child 
:nth-child() 


:nth-last- 
child( 


first- 
of-type 


:last-of-type 


:only- 
of-type 


:nth-of- 
typeQ 


:nth-last- 
of-type() 


:empty 
:not() 
:target 
:enabled 
:disabled 
:checked 
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常用 meta 整 理 


概要 


标签 提供 关于 HTML 文 档 的 元 数据 。 元 数据 不 会 显示 在 页 面 上 ， 但 是 对 于 机 器 是 可 读 的 。 它 可 用 于 浏览 器 (如 何 显示 内 容 或 
重新 加 载 页 面 ) ， 搜 索引 擎 (关键 词 ) ， 或 其 他 web BRA. 


基本 属性 


属性 ià 描述 
keywords pa / description / keywords / generator / revised / 把 content 属性 关联 到 一 个 名 称 。 
T "nm 定义 与 http-equiv 或 hame 属 性 相关 的 元 信 
e content-type / expire / refresh / set-cookie 把 content 属 性 关联 到 HTTP 头 部 。 
X VAN 
参考 资料 


e 常用 meta 整 理 





常用 meta 整 理 
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什么 是 Viewport 


e MS 
参考 $r 料 


e 什么 是 Viewport Meta (width 详解 ) 及 在 手机 上 的 应 用 


什么 是 Viewport 
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CSS 动 转 


e MS 
参考 $t 料 


e CSS3 动 转 总 结 


HTML/CSS 进 阶 


27 





前 端 工程 病 手 册 





CSS 基 线 


基线 是 排版 上 的 一 种 名 词 ， 是 指 大 部 分 字母 所 “坐落 "其 上 的 一 条 看 不 见 的 线 ， 每 条 基线 之 间 形成 基本 的 基线 网 格 。 但 是 在 web 


中 ， 当 我 们 需要 垂直 对 齐 的 时 候 ， 基 线 往往 让 人 失望 ， 比 如 line-height BIE. 
Je MA 
参考 资料 


e Wikipedia: baseline) 
e CSS 基 线 之 道 


CSS 基 线 
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CSS 动 转 


Je MS 
参考 $r 料 


e 利用 CSS animation 和 CSS sprite 制作 动画 


CSS 动 画 
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很 多 CSS 的 基础 框架 ， 上 比如 React。 


dh LLLI 力 口 
BI mU AS 
Web Component 是 未 来 的 一 种 趋势 ， 现 阶段 ， 还 是 


e 颠覆 式 前 端 Ul 开 发 框架 : React 


前 端 UI 框 架 
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JavaScript 基 础 知识 


描述 一 些 容易 混淆 或 者 忘记 的 知识 点 。 上 比如 mouse 事 件 的 顺序 ，event 属 性 有 哪些 。。。 


e MSN 
参考 Tr 料 


e 如 何 正 确 学 习 JavaScript? 
e JavaScript 标准 参考 教程 (alpha) : 阮 一 峰 写 的 教程 。 
e JavaScript PAIE : 最 完整 最 简洁 的 JavaScript 基 础 教程 。 





JavaScript 基 础 
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作用 域 问 题 


JavaScript 语 于 的 作用 域 仅 存在 于 画 数 范围 中 。 这 是 必须 要 牢记 的 一 点 ， 还 有 一 点 重要 的 就 是 作用 域 的 提升 规则 。 


作用 域 问题 


JS 最 容易 出 现 混 淆 的 就 是 作用 域 的 情况 。 传 统 的 类 C 语 言 ,它们 的 作用 域 是 block-level scope ， 块 级 作用 域 ， 花 括号 就 是 一 


个 作用 域 。 但 是 对 于 JavaScript 而 言 ， 它 的 作用 域 是 function-level scope ， 比 如 if 条件 语句 ， 就 不 算 一 个 独立 的 作用 域 : 


var x = 1; 
console.log(x); // 1 
if (true) { 
var X - 2; 
console.log(x); // 2 


y 
console.log(x); // 2 


f£JavaScriptrh, 如 果 我 们 需要 实现 block-level scope , Sit — Fh 3: 388973 3X, MMEM EL BLUT ERU] EB s n IF FB sl: 


function foo() { 
var x = 1; 
if (x) € 
(function () € 
var X - 2; 
// some other code 
309; 


} 
TS Suu 


作用 域 提升 


变量 被 提升 


对 JavaScript 解 释 器 而 下， 所 有 的 函数 和 变量 声明 都 会 被 提升 到 最 前 面 , 并 且 变 量 声明 永远 在 前 面 ， 赋 值 在 声明 过 程 之 后 。 比 


如 : 


var x = 10; 
function x(){}; 
console.log(x); // 10 


实际 上 被 解释 为 : 


var x; 
function x(){}; 

x = 10; 
console.log(x); // 10 


函数 被 提升 








作用 域 问题 
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函数 的 声明 方式 主要 由 两 种 : 声明 式 和 变量 式 。 





声明 式 会 自动 将 声明 放 在 前 面 并 且 执 行 赋值 过 程 。 而 变量 式 则 是 先 将 声明 提升 ， 然 后 到 赋值 处 再 执行 赋值 。 上 比如 : 


function test() { 
foo(); // TypeError "foo is not a function" 
bar(); // "this will run!" 
var foo - function () ( // function expression assigned to local variable 'foo' 
alert("this won't run!"); 


D 
function bar() { // function declaration, given the name 'bar' 
alert("this will run!"); 


test(); 


实际 上 等 价 于 : 


function test() { 
var foo; 
var bar; 
bar - function () ( // function declaration, given the name 'bar' 
alert("this will run!"); 


} 


foo(); // TypeError "foo is not a function" 
bar(); // "this will run!" 


foo - function () ( // function expression assigned to local variable 'foo' 


alert("this won't run!"); 


test(); 
主要 注意 的 地 方 : 带 有 命名 的 函数 变量 式 声 明 ， 是 不 会 提升 到 作用 域 范围 内 的 ， 比 如 : 


var baz = function spam() {}; 
baz(); // vaild 
spam(); // ReferenceError "spam is not defined" 


任何 时 候 ， 请 使 用 var 声明 变量 , 并 放置 在 作用 域 的 顶端 . 


工具 推荐 JsLint 之 类 ， 帮 助 你 验证 语法 的 规范 。 
~p» MN 
参考 资料 


e JavaScript Scoping and Hoisting 
e ECMScript Standard(PDF) 





作用 域 问题 
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运算 符 的 优先 级 
任何 一 门 语言 都 会 遵守 这 样 的 规则 。 


e MDN: 运算 符 优先 级 
e JS Comparison Table: if, zz, === 


e 代码 之 迷 (=) - 运算 符 


运算 符 的 优先 级 


各 种 对 比 情况 
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undefined 与 nyull 的 区 别 


在 常见 的 强 类 型 语言 中 ， 通 常 有 一 个 表示 “ 空 "的 值 ， 比 如 NULL。 但 是 在 Javascript 中 ， 空 (或 者 叫 * 无 值 ") 有 两 种 选择 : 
undefined 和 null。 在 Javascript 中 除了 这 两 个 值 其 他 都 是 对 象 。 其 他 的 基本 类 型 都 有 其 对 象 的 包装 类 型 。 但 是 ， typeof 
null 返回 的 是 object ， 这 是 一 个 一 直 未 修复 的 bug。 


相似 之 处 


都 是 完全 不 可 变 的 ， 没 有 属性 和 方法 ， 也 不 能 给 其 属性 赋值 。 事 实 上 ,试图 访问 或 定义 一 个 属性 将 会 引发 一 个 类 型 错误 
(TypeError) 。 正 如 他 们 的 名 字 暗 示 的 那样 ， 他 们 是 完全 无 效 的 值 。 





不 同 之 处 





一 个 重要 的 区 别 ， 服 务 于 不 同 的 目的 和 理由 。 区 分 这 两 个 值 ， 你 可 以 认为 undefined 代 表 一 个 意 想不到 的 没有 值 而 null 作 为 预 
期 没有 值 的 代表 。 


使 用 Object.prototype.toString.call() 形式 可 以 具体 打印 类 型 。 


undefined 


undefined 实 际 上 代表 了 不 存在 的 值 (non-existence of a value) . 


有 许多 的 方法 产生 一 个 undefined 值 的 代码 。 它 通常 遇 到 当 试图 访问 一 个 不 存在 的 值 时 。 在 这 种 情况 下 ， 在 JavaScript 这 种 动 
态 的 弱 类 型 语言 中 ， 只 会 默认 返回 一 个 undefined 值 ， 而 不 是 上 升 为 一 个 错误 


e 任何 声明 变量 时 没有 提供 一 个 初始 值 ， 都 会 有 一 个 为 undefined 的 默认 值 

e. 当 试 图 访问 一 个 不 存在 的 对 象 属性 或 数组 项 时 ， 返 回 一 个 undefined 值 

e 如 果 省 略 了 画 数 的 返回 语句 ,返回 undefined 

e 图 数 调 用 时 未 提供 的 值 结果 将 为 undefined 参 数值 

e void 操 作 符 也 可 以 返回 一 个 undefined 值 。 像 Underscore 的 库 使 用 它 作 为 一 个 防御 式 的 类 型 检查 ， 因 为 它 是 不 可 变 的 ， 可 
以 在 任何 上 下 文 依赖 返回 undefined 

e undefined 是 一 个 预定 义 的 全 局 变量 (不 像 null 关 键 字 ) 初 始 化 为 undefined 值 


null 


通常 用 作 一 个 空 引用 一 个 空 对 象 的 预期 ,就 像 一 个 占 位 符 。typeof 的 这 种 行为 已 经 被 确认 为 一 个 错误 ， 虽 然 提 出 了 修正 ， 出 于 
后 兼容 的 目的 ， 这 一 点 已 经 保持 不 变 。 这 就 是 为 什么 JavaScript 环 境 从 来 没有 设置 一 个 值 为 null ; 它 必须 以 编程 方式 完成 。 


使 用 null 的 情况 : 


e DOM， 它 是 独立 于 语言 的 ， 不 属于 ECMAScript 规 范 的 范围 。 因 为 它 是 一 个 外 部 API， 试 图 获取 一 个 不 存在 的 元 素 返 回 一 
个 null 值 ， 而 不 是 undefined。 

e 如 果 你 需要 给 一 个 变量 或 属性 指定 一 个 不 变 值 ， 将 它 传递 给 一 个 函数 ， 或 者 从 一 个 函数 返回 null，null 几 乎 总 是 最 好 的 选 
择 。 

e JavaScript 使 用 undefined 并 且 程 序 员 应 该 使 用 null。 

e 通过 分 配 null 值 ， 有 效 地 清除 引用 ， 并 假设 对 象 没 有 引用 其 他 代码 ， 指 定 垃圾 收集 ， 确 保 回 收 内 存 。 





Object.prototype.toString 调 用 过 程 


undefined 与 null 的 区 别 35 
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e 如 果 值 是 undefined， 返 回 “[object Undefined]"。 

e 如 果 这 个 值 为 null， 则 返回 “[object Null”. 

e 让 O 〇 作为 调用 ToObject 同 时 传递 this 值 作为 参数 的 结果 值 。 

e 让 class 是 O 的 内 部 属性 [[Class]] 的 值 。 

e 返回 的 结果 连接 三 个 字符 串 “[object "”，class， 和 人 引 的 结果 的 字符 串 值 。 


e 探索 JavaScript 中 Nul 和 Undefined 的 深渊 


undefined 5-null [X 5 
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内 置 对 象 与 原生 对 象 


e JavaScript 原 生 对 象 及 扩展 


Wig ERG BUE x 
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AGE ERN 
理解 函数 的 几 种 声明 方式 ， 以 及 其 中 的 差异 。 


e 在 JavaScript 的 Array 数 组 中 调用 一 组 Function 方 法 


ATE 
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事件 机 制 


JavaScript 是 一 套 使 用 事件 机 制 较 多 的 语言 ， 特 别 是 与 DOM 交 互 的 时 候 。 所 以 了 解 并 理解 事件 机 制 就 变 得 很 必要 了 。 
事件 监听 


HTML 内 联 属 性 


类 似 <button onclick="alert(' 你 点 击 了 这 个 按钮 ');"> 点 击 这 个 按钮 </button> 的 方式 ， 这 种 方式 会 使 JS 与 HTML 高 度 耦 合 ， 不 利于 开 
发 和 维护 ， 不 推荐 使 用 。 


DOM 属 性 绑 定 





使 用 DOM 元 素 的 onxxx 属性 设置 ， 简 单 易 懂 ， 兼 容 性 好 。 确 定 是 只 能 绑 定 一 个 外 理 画 数 。 


z TÉ 
EFE us Dr EC 
ERARE HITER element.addEventListener(«event-name», «callback», «use-capture»); , T£ element 这 个 对 象 上 面 添加 一 个 


事件 监听 器 ， 当 监听 到 有 事件 发 生 的 时 候 ， 调 用 这 个 回调 函数 。 至 于 这 个 参数 ， 表 示 该 事件 监听 是 在 “捕获 "阶段 中 监听 ( 设 
置 为 true) 还 是 在 “ 冒 泡 " 阶 段 中 监听 (设置 为 false) 。 


移 除 事件 监听 


使 用 事件 解除 绑 定 方法 : element.removeEventListener(«event-name», «callback», <use-capture>); 


ARTENE, AER SNBSIBGESÉURBERES AAENAEN, VENERAR, AA ARREA E a TE Se £6 35 3X P [E073] ES 
数 的 引用 ， 才 可 以 断 开 绑 定 。 


模拟 触发 事件 

内 置 的 时 间 也 可 以 被 JavaScript 模 拟 触发 ， 使 用 dispatchEvent 方法 。 
自 定义 事件 

与 自 定义 事件 的 画 数 有 Event, CustomEvent 和 dispatchEvent。 
Event 

直接 自 定义 事件 ， 使 用 Event 构造 图 数 : 


var event = new Event('build'); 


// Listen for the event. 
elem.addEventListener('build', function (e) ( ... }, false); 


// Dispatch the event. 
elem.dispatchEvent(event); 
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CustonEvent 


CustomEvent 可 以 创建 一 个 更 高 度 自 定义 事件 ， 还 可 以 附带 一 些 数据 ， 上 有 具体 用 法 如 下 : 


var myEvent = new CustomEvent(eventname, options); 


其 中 options 可 以 是 : 
1 
detail: ( 
J 


bubbles: true, 
cancelable: false 


其 中 detail 可 以 存放 一 些 初始 化 的 信息 ， 可 以 在 触发 的 时 候 调 用 。 其 他 属性 就 是 定义 该 事件 是 否 具有 冒 泡 等 等 功能 。 


dispatchEvent 


这 个 用 于 触发 自 定义 的 事件 。 


事件 顺序 


当 我 们 给 父子 关系 的 元 素 都 绑 定 了 事件 的 时 候 ， 触 发 子 元 素 的 时 候 ， 这 两 个 事件 发 生 的 前 后 顺序 是 如 何 的 ? 这 引 开 了 我 们 关 
于 事件 顺序 的 讨论 ， 其 实 一 共有 两 种 方式 


e Event Capturing( 事 件 捕获 ) : NetScape 所 主张 的 方式 
e Event Bubbling( 事 件 冒 泡 ) : Micsoft 所 主张 的 方式 


这 两 种 方式 确定 了 事件 执行 的 前 后 顺序 ， 只 不 过 后 来 W3C 对 DOM2 的 事件 模型 给 出 了 一 个 规范 : 首先 进入 事件 捕获 阶段 -> 达 
到 元 素 后 -> 进入 事件 冒 泡 阶 段 。 


开发 者 可 以 通过 addEventListener 加 数 的 第 三 个 参数 设置 事件 触发 的 阶段 ， 默 认为 false, 冒 泡 阶段 。 而 DOM1 级 别 的 事件 绑 定 
则 只 能 在 冒 泡 阶 段 触 发 。 


事件 代理 


事件 绑 定 后 ， 检 测 顺序 就 会 从 被 绑 定 的 DOM 下 滑 到 触发 的 元 素 ， 再 冒 泡 会 绑 定 的 DOM 上 。 也 就 是 说 ， 如 果 你 监听 了 一 个 
DOM 节 点 ， 那 也 就 等 于 你 监听 了 其 所 有 的 后 代 节点 。 


代理 的 意思 就 是 只 监听 父 节点 的 事件 触发 ， 以 来 代理 对 其 后 代 节 点 的 监听 ， 而 你 需要 做 的 只 是 通过 currentTarget 属性 得 到 触 
发 元 素 并 作出 回应 。 


使 用 事件 代理 意味 着 你 可 以 节省 大 量 重复 的 事件 监听 ， 以 减少 浏览 器 资源 消耗 。 还 有 一 个 好 处 就 是 让 HTML 独 立 起 来 ， 比 如 
之 后 还 有 要 加 子 元 素 的 需求 ， 也 不 需要 再 为 其 单独 加 事件 监听 了 。 


事件 的 Event 对 象 


当 一 个 事件 被 触发 的 时 候 ， 会 创建 一 个 事件 对 象 (Event Object) ， 这 个 对 象 里 面包 含 了 一 些 有 用 的 属性 或 者 方法 。 事 件 对 
象 会 作为 第 一 个 参数 ， 传 递 给 我 们 的 毁 掉 函数 。 我 们 可 以 使 用 下 面 代 码 ， 在 浏览 器 中 打印 出 这 个 事件 对 象 : 
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var btn = document.getElementsByTagName( 'button'); 

btn[0].addEventListener('click', function(event) { 
console.log(event); 

te false); 





比较 常用 的 几 个 属性 和 方法 : 


e type(string): 事件 的 名 称 ， 比 如 “click"。 
e target(node): 事件 要 触发 的 目标 节点 。 
e currentTarget(node): 它 就 指向 正在 处 理事 件 的 元 素 : 这 恰 是 我 们 需要 的 。 很 不 幸 的 是 微软 模型 中 并 没有 相似 的 属性 , 你 
也 可 以 使 用 "this" 关 键 字 。 事 件 属性 也 提供 了 一 个 值 可 供 访问 : event.currentrarget o 
e bubbles (boolean): 表明 该 事件 是 否 是 在 冒 泡 阶 段 触发 的 。 
e preventDefault (function): 这 个 方法 可 以 禁止 一 切 默认 的 行为 ， 例 如 点 击 a 标签 时 ， 会 打开 一 个 新 页 面 ， 如 果 为 a 标签 
监听 事件 click 同时 调用 该 方法 ， 则 不 会 打开 新 页 面 。 
e stopPropagation (function): 很 多 时 候 ， 我 们 触发 某 个 元 素 ， 会 顺带 触发 出 它 父 级 身上 的 事件 ， 这 有 时 候 是 我 们 不 想 要 
的 ， 大 多 数 我 们 想 要 的 还 是 事件 相互 独立 。 所 以 我 们 可 以 选择 阻止 事件 冒 泡 ， 使 用 event.stopPropagation(). 
e stoplmmediatePropagation (function): 与 stopPropagation 类 似 ， 就 是 阻止 触发 其 他 监听 画 数 。 但 是 与 stopPropagation 
不 同 的 是 ， 它 更 加 “强力 ”阻止 除了 目标 之 外 的 事件 触发 ， 其 至 阻止 针对 同一 个 目标 节点 的 相同 事件 
e cancelable (boolean): 这 个 属性 表明 该 事件 是 否 可 以 通过 调用 event.preventDefault 方法 来 禁用 默认 行为 。 
e eventPhase (number): 这 个 属性 的 数字 表示 当前 事件 触发 在 什么 阶段 。 
o 0: none 
o 1: 捕获 
o 2: 目标 
o 3: 冒 泡 
e pageX 和 pageY (number): 3x A 7 I&lEz&zs Rh & SF, irti F YLIEIBUAE n. 
e isTrusted (boolean): 表明 该 事件 是 浏览 器 触发 (用 户 真 实 操作 触发 ) ， 还 是 JavaScript 代码 触发 的 。 


事件 的 回调 函数 


事件 绑 定 函数 时 ， 该 画 数 会 以 当前 元 素 为 作用 域 执 行 ,所 以 回调 函数 中 的 this 是 当前 的 DOM 元 素 。 如 果 我 们 需要 指定 作用 
域 ， 可 以 选择 : 














e ÓEFIEE 4 ES IICOL E [o] 3 ETC 
e 使 用 bind 方 法 


事件 列表 
可 以 通过 MDN 坦 询 ， 也 可 以 在 浏览 器 中 输入 


for (i in window) ( 
if ( /^on/.test(i)) ( console.log(i); ) 
} 


查看 ， 你 会 发 现 提供 的 事件 超过 你 想象 的 多 | 


常用 事件 


e 1oad 资源 加 载 完 成 时 触发 。 这 个 资源 可 以 是 图 片 、CSS 文件 、JS 文件 、 视 频 、document 和 window 等 等 。 

e DOMContentLoaded DOM 构 建 完毕 的 时 候 触发 ,jQuery 的 ready 方 法 包 应 的 就 是 这 个 事件 。 

e beforeunload 当 浏 览 者 在 页 面 上 的 输入 框 输入 一 些 内 容 时 ， 未 保存 、 误 操作 关 掉 网 页 可 能 会 导致 输入 信息 丢失 。 当 浏览 
者 输入 信息 但 未 保存 时 关 掉 网 页 ， 我 们 就 可 以 开始 监听 这 个 事件 ,这 时 候 试 图 关闭 网 页 的 时 候 ， 会 弹 窗 阻止 操作 ， 点 击 确 
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认 之 后 才 会 关闭 。 当 然 ， 如 果 没 有 必要 ， 就 不 要 监听 ， 不 要 以 为 使 用 它 可 以 为 你 留 住 浏览 

e resize 当 节 点 尺寸 发 生变 化 时 ， 触 发 这 个 事件 。 通 常用 在 window 上 ， 这 样 可 以 监听 浏览 器 窗口 的 变化 。 通 常用 在 复 
杂 布 局 和 响应 式 上 。 出 于 对 性 能 的 考虑 ， 你 可 以 使 用 函数 throttle 或 者 debounce 技巧 来 进行 优化 ，throttle 方法 大 体 思 
路 就 是 在 某 一 段 时 间 内 无 论 多 次 调用 ， 只 执行 一 次 函数 ， 到 达 时 间 就 执行 ; debounce 方法 大 体 思路 就 是 在 某 一 段 时 间 
内 等 待 是 否 还 会 重复 调用 ， 如 果 不 会 再 调用 ， 就 执行 画 数 ， 如 果 还 有 重复 调用 ， 则 不 执行 继续 等 待 。 

e error 当 我 们 加 载 资源 失败 或 者 加 载 成 功 但 是 只 加 载 一 部 分 而 无 法 使 用 时 ， 就 会 触发 error 事件 ， 我 们 可 以 通过 监听 该 
事件 来 提示 一 个 友好 的 报错 或 者 进行 其 他 义理 。 比 如 JS 资源 加 载 失败 ， 则 提示 尝试 刷新 ; 图 片 资源 加 载 失 败 ， 在 图 片 
下 面 提示 图 片 加 载 失 败 等 。 该 事件 不 会 冒 泡 。 因 为 子 节点 加 载 失 败 ， 并 不 意味 着 父 节 点 加 载 失败 ， 所 以 你 的 义理 函数 必 
须 精确 绑 定 到 目标 节点 。 


IE 浏 览 器 下 的 情况 


IE 下 绑 定 事件 


在 IE 下面 绑 定 一 个 事件 监听 ， 在 IE9 之 前 的 版 本 中 无 法 使 用 标准 的 addEventListener 豆 数 ， 而 是 使 用 自家 的 


attachEvent ， 上 有 具体 用 法 : element.attachEvent(«event-name», «callback»); 


它 只 支持 监听 在 冒 泡 阶段 触发 的 事件 ， 所 以 为 了 统一 ， 在 使 用 标准 事件 监听 函数 的 时 候 ， 第 三 参数 传递 false, 


IE 下 的 Event 事 件 


IE 中 往 回 调 画 数 中 传递 的 事件 对 象 与 标准 也 有 一 些 差异 ， 你 需要 使 用 window.event 来 获取 事件 对 象 。 所 以 你 通常 会 写 出 下 
面 代码 来 获取 事件 对 象 : 


event = event || window.event 


此 外 还 有 一 些 事件 属性 有 差别 ， 比 如 比较 常用 的 event.target 属性 ，IE 中 没有 ， 而 是 使 用 event.srcElement 来 代替 。 如 果 你 
的 回调 画 数 需要 处 理 触发 事件 的 节点 ， 那 么 需要 写 


node = event.srcElement || event.target; 


Jo MS 
参考 $t 料 


e Introduction to Events 

e Event order 

e MDN: Event 

e W3C: Document Object Model (DOM) Level 3 Events Specification 
e 你 若 触 发 ， 我 就 处 理 一 一 浅 谈 JavaScript 的 事件 响应 

e 最 详细 的 JavaScript 和 事件 解读 
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原型 继承 


JavaScript 不 是 真正 意义 上 的 面向 对 象 语言 ， 没 有 提供 传统 的 继承 方式 , 它 提供 的 是 一 种 叫做 原型 继承 的 方式 。 但 是 它 拥 有 面 
向 对 象 和 男 数 式 的 编程 特点 ,理解 原型 继承 ， 对 我 们 使 用 JS 来 实现 面向 对 象 很 有 帮助 。 


原型 与 原型 链 

在 Javascript 中 ， 每 个 函数 都 有 一 个 原型 属性 prototype 指 向 自身 的 原型 ， 而 由 这 个 画 数 创建 的 对 象 也 有 一 个 “proto_ 属性 指 
向 这 个 原型 ， 而 函数 的 原型 是 一 个 对 象 ， 所 以 这 个 对 象 也 会 有 一 个 proto “指向 自己 的 原型 ， 这 样 逐 层 深 入 直到 Object 对 
象 的 原型 ， 这 样 就 形成 了 原型 链 。 


每 个 函数 都 是 Function 画 数 创建 的 对 象 ， 所 以 每 个 函数 也 有 一 个 _proto_ 属性 指向 Function 函 数 的 原型 。 这 里 需要 指出 的 
是 ， 真 正 形成 原型 链 的 是 每 个 对 象 的 _proto ”属性 ， 而 不 是 本 数 的 prototype 属 性 ， 这 是 很 重要 的 。 


原型 继承 与 类 继承 的 区 别 


基于 类 的 继承 原型 继承 
类 是 不 可 变 的 。 在 运行 时 ， 你 无 法 修改 或 者 添加 新 的 方 原型 是 灵活 的 。 它 们 可 以 是 不 可 变 的 也 可 以 是 可 变 的 
类 可 能 会 不 支持 多 重 继承 对 象 可 以 继承 多 个 原型 对 象 


基于 类 的 继承 比较 复杂 。 你 需要 使 用 抽象 类 ， 接 口 和 原型 继承 比较 简洁 。 你 只 有 对 象 ， 你 只 需要 对 对 象 进行 扩展 
final 类 等 等 就 可 以 了 


创建 方式 


构造 模式 (使 用 new 关 键 字 ) 


由 于 JavaScript 中 所 有 部 数 都 可 以 充当 对 象 的 构造 男 数 ， 所 以 可 以 通过 关键 字 new 来 进行 区 分 , 但 是 new 并 不 是 一 个 方法 。 为 
了 使 得 Javascript 看 起 来 更 像 Java 原 型 模式 被 迫 屈服 于 构造 模式 。 因 此 每 个 Javascript 中 的 函数 都 有 一 个 prototype 对 象 然后 可 
以 用 来 作为 构造 器 (这 里 构造 器 的 意思 应 该 是 说 新 的 对 象 是 在 prototype 对 象 的 基础 上 进行 构造 的 )。new 关 键 字 人 允许 我 们 把 函 
数 当做 构造 画 数 使 用 。 它 会 克隆 构造 画 数 的 prototype 属 性 然后 把 它 绑 定 到 this 对 象 中 ， 如 果 没 有 显 式 返回 对 象 则 会 返回 this。 


var Parent = function(){ 
this.name = 'parent' ; 

JE 

Parent.prototype.getName = function()( 
return this.name ; 

Da 

Parent.prototype.obj = (a : 1} ; 


var Child = function(){ 
this.name = 'child' ; 

Jat; 

Child.prototype - new Parent() ; 


var parent - new Parent() ; 
var child - new Child() ; 


原型 模式 (不 要 使 用 new 关 键 字 ) 
new 关 键 字 掩盖 了 Javascript 中 真正 的 原型 继承 ， 使 得 它 更 像 是 基于 类 的 继承 。 就 像 Raynos 说 的 : 
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new 是 Javascript 在 为 了 获得 流行 度 而 加 入 与 Java 类 似 的 语法 时 期 留 下 来 的 一 个 残留 物 


Javascript 是 一 个 源 于 Self 的 基于 原型 的 语言 。 然 而 ， 为 了 市 场 需求 ，Brendan Eich 把 它 当 成 Java 的 小 兄弟 推出 : 





并 且 我 们 当时 把 Javascript 当 成 Java 的 一 个 小 兄弟 ， 就 像 在 微软 语言 家 庭 中 Visual Basic 相 对 于 C++ 一 样 。 


这 个 设计 决策 导致 了 new 的 问题 。 当 人 们 看 到 Javascript 中 的 new 关 键 字 ， 他 们 就 想到 类 ， 然 后 当 他 们 使 用 继承 时 就 遇 到 了 傻 
了 。 就 像 Douglas Crockford 说 的 : 





这 个 间接 的 行为 是 为 了 使 传统 的 程序 员 对 这 门 语言 更 熟悉 ， 但 是 却 失 履 了 ， 就 像 我 们 看 到 的 很 少 Java 程 序 员 迁 择 了 Javascript。Javascript 的 构造 模式 并 没 太 
i 


因此 我 建议 停止 使 用 new 关 键 字 。Javascript 在 传统 面向 对 象 假象 下 面 有 着 更 加 强大 的 原型 系统 。 然 大 部 分 程序 员 并 没有 看 见 
这 些 还 处 于 黑暗 中 。 创 建 对 象 使 用 object.create() 方法 。 





javascriptvar rectangle = ( 
create : function(width,height)[ 
var self = Object.create(this) ; 
self.height - height ; 
self.width - width ; 
return self ; 
3 
area : function()( 
return this.width * this.height ; 
} 
Fe 
var rect = rectangle.create(5,10) ; 
alert(rect.area()) ; 


构造 模式 和 原型 模式 对 比 


构造 模式 原型 模式 
函数 式 特点 无 法 与 new 关键 字 一 起 使 用 函数 式 特 点 可 以 与 create 结 合 使 用 
忘记 使 用 new 会 导致 无 法 预期 的 bug 并 且 会 污染 全 局 变量 由 于 create 是 一 个 画 数 ， 所 以 程序 总 是 会 按照 预期 工作 
使 用 构造 画 数 的 原型 继承 比较 复杂 并 且 混 乱 使 用 原型 的 原型 继承 简洁 易 懂 


参考 资料 


e 为 什么 原型 继承 很 重要 
e 再 谈 Javascript 原 型 继承 
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详解 this 


习惯 了 高 级 语言 的 你 或 许 觉 得 JavaScript 中 的 this 跟 Java 这 些 面 向 对 象 语 言 相似 ， 保 存 了 实体 属性 的 一 些 值 。 
视 作 幻影 魔神 比较 恰当 ， 手 提 一 个 装 满 未 知 符 文 的 灵 侈 。 


全 局 this 
浏览 器 宿主 的 全 局 环境 中 ，this 指 的 是 window 对 象 。 


«script type="text/javascript"> 
console.log(this === window); //true 
</script> 


浏览 器 中 在 全 局 环境 下 ， 使 用 var 声 明 变 量 其 实 就 是 赋值 给 this 或 window。 


«script type="text/javascript"> 
var foo = "bar"; 
console.log(this.foo); //logs "bar" 
console.log(window.foo); //logs "bar" 
</script> 


任何 情况 下 ， 创 建 变量 时 没有 使 用 var 或 者 let(ECMAScript 6)， 也 是 在 操作 全 局 this。 


«script type="text/javascript"> 
foo = "bar"; 


function testThis() { 
foo - "foo"; 


} 


console.log(this.foo); //logs "bar" 

testThis(); 

console.log(this.foo); //logs "foo" 
«/script» 


Node 命 令 行 (REPL) 中 ，this 是 全 局 命名 空间 。 可 以 通过 global 来 访问 。 


> this 

{ ArrayBuffer: [Function: ArrayBuffer], 
Int8Array: ( [Function: Int8Array] BYTES PER ELEMENT: 1 }, 
UintsArray: { [Function: Uint8Array] BYTES PER ELEMENT: 1 j, 


» global --- this 
true 


在 Node 环 境 里 执行 的 JS 脚本 中 ，this 其 实 是 个 空 对 象 ， 有 别 于 global。 


console.log(this); 
console.log(this --- global); 


HE 
$ node test.js 
ü 


false 


详解 this 


45 


in 





前 端 工程 病 手 册 





但 在 命令 行 里 进行 求 值 却 会 赋值 到 this 身 上 。 


> var foo = "bar"; 
» this.foo 

bar 

» global.foo 

bar 


在 Node 里 执行 的 脚本 中 ， 创 建 变量 时 没 带 var 或 let 关 键 字 ， 会 赋值 给 全 局 的 global 但 不 是 this (译注 : 上 面 已 经 提 到 this 和 
global 不 是 同一 个 对 象 ， 所 以 这 里 就 不 奇怪 了 ) 。 


foo - "bar"; 
console.log(this.foo); 
console.log(global.foo); 


HH 

$ node test.js 
undefined 

bar 


但 在 Node 命 令 行 里 ， 就 会 赋值 给 两 者 了 。 


简单 来 说 ，Node 脚 本 中 global 和 this 是 区 别 对 待 的 ， 而 Node 命 合 行 中 ， 两 者 可 等 效 为 同一 对 象 。 
函数 或 方法 里 的 this 


除了 DOM 的 事件 回调 或 者 提供 了 执行 上 下 文 〈 后 面 会 提 到 ) WEN, KAES RAA (Tanew) 时 ， 里 面 的 this 指 向 的 是 
全 局 作用 域 。 


«script type="text/javascript"> 
foo - "bar"; 


function testThis() { 
this.foo - "foo"; 


} 


console.log(this.foo); //logs "bar" 

testThis(); 

console.log(this.foo); //logs "foo" 
«/script» 


测试 结果 : 


$ node test.js 
bar 
foo 


还 有 个 例外 ， 就 是 使 用 了 "use strict";。 此 时 this 是 undefined。 


«script type-"text/javascript"» 
foo - "bar"; 


function testThis() { 
MSP- OTTICA 
this.foo - "foo"; 


} 


console.log(this.foo); //logs "bar" 
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testThis(); //Uncaught TypeError: Cannot set property 'foo' of undefined 
«/script» 


当 用 调用 函数 时 使 用 了 new 关 键 字 ， 此 刻 this 指 代 一 个 新 的 上 下 文 ， 不 再 指向 全 局 this。 


<script type="text/javascript"> 
foo = "bar"; 


function testThis() { 
this.foo - "foo"; 


} 


console.log(this.foo); //logs "bar" 
new testThis(); 
console.log(this.foo); //logs "bar" 


console.log(new testThis().foo); //logs "foo" 
</script> 


通常 我 将 这 个 新 的 上 下 文 称 作 实例 。 
原型 中 的 this 


函数 创建 后 其 实 以 一 个 函数 对 象 的 形式 存在 着 。 既 然 是 对 象 ， 则 自动 获得 了 一 个 叫做 prototype 的 属性 ， 可 以 自由 地 对 这 个 属 
性 进行 赋值 。 当 配合 new 关 键 字 来 调用 一 个 画 数 创 建 实 例 后 ， 此 刻 便 能 直接 访问 到 原型 身上 的 值 。 


function Thing() 4 
console.log(this.foo); 


J 
Thing.prototype.foo - "bar"; 


var thing - new Thing(); //logs "bar" 
console.log(thing.foo);  //logs "bar" 


当 通 过 new 的 方式 创建 了 多 个 实例 后 ， 他 们 会 共用 一 个 原型 。 比 如 ， 每 个 实例 的 this.foo 都 返回 相同 的 值 ， 直 到 this.foo 被 重 
写 。 


function Thing() 4 

J 

Thing.prototype.foo - "bar"; 

Thing.prototype.logFoo = function () { 
console.log(this.foo); 

J 

Thing.prototype.setFoo = function (newFoo) { 
this.foo - newFoo; 


} 


var thingi = new Thing(); 
var thing2 - new Thing(); 


thingi.logFoo(); //logs "bar" 
thing2.logFoo(); //logs "bar" 


thingi.setFoo("foo"); 
thingi.logFoo(); //logs "foo"; 
thing2.logFoo(); //logs "bar"; 


thing2.foo - "foobar"; 
thingi.logFoo(); //logs "foo"; 
thing2.logFoo(); //logs "foobar"; 
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在 实例 中 ，this 是 个 特殊 的 对 象 ， 而 this 自 身 其 实 只 是 个 关键 字 。 你 可 以 把 this 想 象 成 在 实例 中 获取 原型 值 的 一 种 途径 ， 同 时 
对 this 赋 值 又 会 覆盖 原型 上 的 值 。 完 全 可 以 将 新 增 的 值 从 原型 中 删除 从 而 将 原型 还 原 为 初始 状态 。 


function Thing() 4 

} 

Thing.prototype.foo = "bar"; 

Thing.prototype.logFoo = function () { 
console.log(this.foo); 

} 

Thing.prototype.setFoo = function (newFoo) { 
this.foo = newFoo; 

y 

Thing.prototype.deleteFoo = function () { 
delete this.foo; 





} 


var thing = new Thing(); 
thing.setFoo("foo"); 
thing.logFoo(); //logs "foo"; 
thing.deleteFoo(); 
thing.logFoo(); //logs "bar"; 
thing.foo - "foobar"; 
thing.logFoo(); //logs "foobar"; 
delete thing.foo; 
thing.logFoo(); //logs "bar"; 


或 者 不 通过 实例 ， 直 接 操 作画 数 的 原型 。 


function Thing() 4 


J 
Thing.prototype.foo - "bar"; 


Thing.prototype.logFoo = function () { 
console.log(this.foo, Thing.prototype.foo); 


J 


var thing - new Thing(); 
thing.foo - "foo"; 
thing.logFoo(); //logs "foo bar"; 


同一 函数 创建 的 所 有 实例 均 共 享 一 个 原型 。 如 果 你 给 原型 赋值 了 一 个 数组 ， 那 么 所 有 实例 都 能 获取 到 这 个 数组 。 除 非 你 在 某 
个 实例 中 对 其 进行 了 重 写 ， 实 事 上 是 进行 了 覆盖 。 


function Thing() 4 


} 
Thing.prototype.things = []; 


var thingi - new Thing(); 
var thing2 - new Thing(); 
thingi.things.push("foo"); 
console.log(thing2.things); //logs ["foo"] 


通常 上 面 的 做 法 是 不 正确 的 《译注 : 改变 thing1 的 同时 也 影响 了 thing2) . WREED DIR REO, MAERA eE 
这 些 值 ， 而 不 是 在 原型 上 。 


function Thing() 4 
this.things - []; 
} 


var thingi = new Thing(); 
var thing2 - new Thing(); 
thingi.things.push("foo"); 
console.log(thingi.things); //logs ["foo"] 
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console.log(thing2.things); //logs [] 


多 个 男 数 可 以 形成 原型 链 ， 这 样 this 便 会 在 原型 链 上 逐步 往 上 找 直 到 找到 你 想 引 用 的 值 。 


function Thingi() { 


F 
Thing1.prototype.foo = "bar"; 


function Thing2() £ 


} 
Thing2.prototype = new Thing1(); 


var thing = new Thing2(); 
console.log(thing.foo); //logs "bar" 





很 多 人 便 是 利用 这 个 特性 在 JS 中 模拟 经 典 的 对 象 继承 。 注 意 原型 链 底层 函数 中 对 this 的 操作 会 覆盖 上 层 的 值 。 


function Thingi() { 


D 
Thingi.prototype.foo - "bar"; 


function Thing2() { 
this.foo = "foo"; 


y 
Thing2.prototype = new Thing1(); 


function Thing3() { 


J 
Thing3.prototype - new Thing2(); 


var thing - new Thing3(); 
console.log(thing.foo); //logs "foo" 


我 习惯 将 赋值 到 原型 上 的 函数 称 作 方 法 。 上 面 某 些 地 方便 使 用 了 方法 这 样 的 字眼 ， 比 如 logFoo 方 法 。 这 些 方法 中 的 this 同 祥 
具有 在 原型 链 上 查找 引用 的 魔力 。 通 常 将 最 初 用 来 创建 实例 的 函数 称 作 构 造 丽 数 。 


原型 链 方法 中 的 this 是 从 实例 中 的 this 开 始 住 上 查找 整个 原型 链 的 。 也 就 是 说 ， 如 果 原 型 链 中 某 个 地 方 直接 对 this 进 行 赋值 覆 
盖 了 某 个 变量 ， 那 么 我 们 拿 到 的 是 覆盖 后 的 值 。 


function Thingi() { 


J 

Thingi.prototype.foo - "bar"; 

Thingi.prototype.logFoo = function () { 
console.log(this.foo); 


} 


function Thing2() { 
this.foo = "foo"; 


J 
Thing2.prototype = new Thing1(); 


var thing = new Thing2(); 
thing.logFoo(); //logs "foo"; 


frJavaScriptrh, HATAREE, ERE s n] MAERA E D 2E: SE SLE (ELA RAER 13] 91d RUN Z AE EL 
的 变量 值 的 ， 而 不 是 直接 继承 this。 


function Thing() 4 
J 
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Thing.prototype.foo = "bar"; 
Thing.prototype.logFoo = function () { 
var info - "attempting to log this.foo:"; 
function doIt() { 
console.log(info, this.foo); 


J 
doIt(); 


var thing - new Thing(); 
thing.logFoo(); //logs "attempting to log this.foo: undefined" 


上 面 示例 中 ，dolt 函数 中 的 this 指 代 是 全 局 作用 域 或 者 是 undefined 如 果 使 用 了 "use strict"; 声 明 的 话 。 对 于 很 多 新 手 来 说 ， 理 


解 这 点 是 非常 头疼 的 。 


还 有 更 奇 苑 的 。 把 实例 的 方法 作为 参数 传递 时 ， 实 例 是 不 会 跟着 过 去 的 。 也 就 是 说 ， 此 时 方法 中 的 this 在 调用 时 指向 的 是 全 局 


this 或 者 是 undefined 在 声明 了 "use strict" 时 。 


function Thing() { 

} 

Thing.prototype.foo = "bar"; 

Thing.prototype.logFoo = function () { 
console.log(this.foo); 


J 


function doIt(method) { 
method(); 
J 


var thing - new Thing(); 
thing.logFoo(); //logs "bar" 
doIt(thing.logFoo); //logs undefined 


所 以 很 多 人 习惯 将 this 缓 存 起 来 ， 用 个 叫 self 或 者 其 他 什么 的 变量 来 保存 ， 以 将 外 层 与 内 层 的 this 区 分 开 来 。 


function Thing() { 
J 
Thing.prototype.foo = "bar"; 
Thing.prototype.logFoo = function () { 
var self - this; 
var info - "attempting to log this.foo:"; 
function doIt() { 
console.log(info, self.foo); 


I 
doIt(); 


var thing - new Thing(); 
thing.logFoo(); //logs "attempting to log this.foo: bar" 


但 上 面 的 方式 不 是 万 能 的 ， 在 将 方法 做 为 参数 传递 时 ， 就 不 起 作用 了 。 


function Thing() € 
} 
Thing.prototype.foo = "bar"; 
Thing.prototype.logFoo = function () { 
var self - this; 
function doIt() { 
console.log(self.foo); 


J 
doIt(); 
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function doItIndirectly(method) { 
method(); 
下 


var thing = new Thing(); 
thing.logFoo(); //logs "bar" 
doItIndirectly(thing.logFoo); //logs undefined 


BORSE Bu E Fbind75iA X zsiBBH.E FX, bind73iAiEFIUS ERAN EX 73 XE REUS BJ, 


function Thing() { 

} 

Thing.prototype.foo = "bar"; 

Thing.prototype.logFoo = function () { 
console.log(this.foo); 


} 


function doIt(method) { 
method(); 
y 


var thing - new Thing(); 
doIt(thing.logFoo.bind(thing)); //logs bar 


同时 也 可 以 使 用 apply 或 call 来 调用 该 方法 或 函数 ， 让 它 在 一 个 新 的 上 下 文中 执行 。 


function Thing() € 
} 
Thing.prototype.foo = "bar"; 
Thing.prototype.logFoo = function () { 
function doIt() { 
console.log(this.foo); 
} 
doIt.apply(this); 
J 


function doItIndirectly(method) { 
method(); 
y 


var thing - new Thing(); 
doItIndirectly(thing.logFoo.bind(thing)); //logs bar 


f& FHbind S] ELE RUE KARD ABE E Rc, MEC RARA EEA 3: DURS REL E 


function Thing() 4 


J 
Thing.prototype.foo - "bar"; 


function logFoo(aStr) { 
console.log(aStr, this.foo); 


} 


var thing = new Thing(); 

logFoo.bind(thing)("using bind"); //logs "using bind bar" 
logFoo.apply(thing, ["using apply"]); //logs "using apply bar" 
logFoo.call(thing, "using call"); //logs "using call bar" 
logFoo("using nothing"); //logs "using nothing undefined" 


EREA ERAR REE APR, AARI k P8 RT BET st AS S ZO [LR R D 
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function Thing() 4 
return (3; 


» 
Thing.prototype.foo - "bar"; 


Thing.prototype.logFoo = function () { 
console.log(this.foo); 


J 


var thing - new Thing(); 
thing.logFoo(); //Uncaught TypeError: undefined is not a function 


iB, $DARRUE MEER UEEGR [BUT P I 8 EG DR REB REAREA, LEImBSARSUTAEÓT,oRBBGSATRPSER. PT 
VAR 3| (e — 1 ESRB 3: newskcyg FB gis BRA Io HERI SES, BERE BE. MRR RRN, ABAGERI—T 
函数 来 创建 实例 ， 并 且 不 通过 new 来 调用 。 当 然 这 只 是 个 人 建议 。 


诚然 ， 你 也 可 以 使 用 Object.create 从 而 避免 使 用 new。 这 样 也 能 创建 一 个 实例 。 


function Thing() 4 


J 
Thing.prototype.foo - "bar"; 


Thing.prototype.logFoo = function () { 
console.log(this.foo); 


J 


var thing = Object.create(Thing.prototype); 
thing.logFoo(); //logs "bar" 


这 种 方式 不 会 调用 该 构造 辑 数 。 


function Thing() 4 
this.foo = "foo"; 


J 
Thing.prototype.foo - "bar"; 


Thing.prototype.logFoo = function () { 
console.log(this.foo); 


} 


var thing = Object.create(Thing.prototype); 
thing.logFoo(); //logs "bar" 


EAA» Object.create;& 8 i3 FH Ae ERA, REAREA EAR, Bü uIBEAS SE SBCE Mg ER ANC, 


function Thingi() { 
this.foo - "foo"; 


J; 
Thing1.prototype.foo = "bar"; 


function Thing2() { 
this.logFoo(); //logs "bar" 
Thingi.apply(this); 
this.logFoo(); //logs "foo" 
} 
Thing2.prototype = Object.create(Thingi.prototype); 
Thing2.prototype.logFoo = function () { 
console.log(this.foo); 


} 
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var thing = new Thing2(); 


对 象 中 的 this 
可 以 在 对 象 的 任何 方法 中 使 用 this 来 访问 该 对 象 的 属性 。 这 与 用 new 得 到 的 实例 是 不 一 样 的 。 


var obj = ( 
T0075 Dar 
logFoo: function () { 
console.log(this.foo); 
J 
ip 


0bj.logFoo(); //logs "bar" 


tarpa Anew, tbiESRObjectcreate, &USUB ERA JS Foe] fex SR. ETARA XE Sl S, REGIS 
对 象 是 一 个 实例 一 样 。 


var obj = ( 
ioo bara 


}; 


function logFoo() { 
console.log(this.foo); 


J 


logFoo.apply(obj); //logs "bar" 


此 时 使 用 this 没 有 向 上 查找 原型 链 的 复杂 工序 。 通 过 this 所 拿 到 的 只 是 该 对 象 身上 的 属性 而 以 。 


var obj = ( 
ioo Dat 
deeper: { 
logFoo: function () { 
console.log(this.foo); 


} 
u 


obj.deeper.logFoo(); //logs undefined 
也 可 以 不 通过 this， 直 接 访问 对 象 的 属性 。 


var obj = ( 
ioo bar 
deeper: ( 
logFoo: function () ( 
console.log(obj.foo); 


} 
}; 


obj.deeper.logFoo(); //logs "bar" 
DOM 事件 回调 中 的 this 
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在 DOM 事 件 的 义理 函数 中 ，this 指 代 的 是 被 绑 定 该 事件 的 DOM 元 素 。 


function Listener() { 
document.getElementById("foo").addEventListener("click", 
this.handleClick); 
J 
Listener.prototype.handleClick = function (event) { 
console.log(this); //logs "<div id-"foo"»«/div»" 


J 


var listener - new Listener(); 
document.getElementById("foo").click(); 


除非 你 通过 bind 人 为 改变 了 事件 处 理 器 的 执行 上 下 文 。 


function Listener() { 
document.getElementById("foo").addEventListener("click", 
this.handleClick.bind(this)); 
} 
Listener.prototype.handleClick = function (event) { 
console.log(this); //logs Listener (handleClick: function} 


J 


var listener - new Listener(); 
document.getElementById("foo").click(); 


HTML 中 的 this 





HTML 标 签 的 属性 中 是 可 能 写 JS 的 ， 这 种 情况 下 this 指 代 该 HTML 元 素 。 


«div id="foo" onclick="console.log(this);"></div> 

«script type-"text/javascript"» 
document.getElementById("foo").click(); //logs «div id-"foo"... 
</script> 


Æ Ẹ this 
无 法 重 写 this， 因 为 它 是 一 个 关键 字 。 


function test () { 
var this - (); // Uncaught SyntaxError: Unexpected token this 


} 


eval 中 的 this 


eval 中 也 可 以 正确 获取 当前 的 this。 


function Thing () { 


» 
Thing.prototype.foo - "bar"; 


Thing.prototype.logFoo = function () { 
eval("console.log(this.foo)"); //logs "bar" 


J 


var thing - new Thing(); 
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thing.logFoo(); 


这 里 存在 安全 隐患 。 最 好 的 办 法 就 是 避免 使 用 eval。 


使 用 Function 关 键 字 创 建 的 函数 也 可 以 获取 this : 


function Thing () { 


} 
Thing.prototype.foo = "bar"; 
Thing.prototype.logFoo - new Function("console.log(this.foo);"); 


var thing - new Thing(); 
thing.logFoo(); //logs "bar" 


使 用 with 时 的 this 
使 用 with 可 以 将 this 人 为 添加 到 当前 执行 环境 中 而 不 需要 显示 地 引用 this。 


function Thing () { 
J 
Thing.prototype.foo - "bar"; 
Thing.prototype.logFoo = function () { 
with (this) { 
console.log(foo); 
foo - "foo"; 


} 


var thing = new Thing(); 
thing.logFoo(); // logs "bar" 
console.log(thing.foo); // logs "foo" 


正如 很 多 人 认为 的 那样 ， 使 用 with 是 不 好 的 ， 因 为 会 产生 歧义 。 


jQuery 中 的 this 


一 如 HTML DOM 元 素 的 事件 回调 ，jQuery 库 中 大 多 地 方 的 this 也 是 指 代 的 DOM 元 素 。 页 面 上 的 事件 回调 和 一 些 便利 的 静态 方 


法 比如 $.each 都 是 这 样 的 。 


«div class="foo bar1"></div> 
«div class="foo bar2"></div> 
<script type="text/javascript"> 
$(".foo").each(function () ( 
console.log(this); //logs «div class-"foo... 
35 
SO tooron( click functrone( 
console.log(this); //logs «div class-"foo... 
IDE 
$(".foo").each(function () ( 
this.click(); 
35 


</script> 


传递 this 


如 果 你 用 过 underscore.js 或 者 lo-dash 你 便 知 道 ， 这 两 个 库 中 很 多 方法 你 可 以 传递 一 个 参数 来 显示 指定 执行 的 上 下 文 。 比 如 
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_.each。 自 ECMAScript 5 标准 后 ， 一 些 原生 的 JS 方 法 也 人 允许 传递 上 下 文 ， 比 如 forEach。 事 实 上 ， 上 文 提 到 的 bind，apply 还 
有 Ccall 已 经 给 我 们 手动 指定 图 数 执行 上 下 文 的 能 力 了 。 


function Thing(type) { 
this.type = type; 

} 

Thing.prototype.log = function (thing) { 
console.log(this.type, thing); 


J 

Thing.prototype.logThings = function (arr) { 
arr.forEach(this.log, this); // logs "fruit apples..." 
..each(arr, this.log, this); //logs "fruit apples..." 


J 


var thing - new Thing("fruit"); 
thing.logThings(["apples", "oranges", "strawberries", "bananas"]); 


这 样 可 以 使 得 代码 简洁 些 ， 不 用 层 层 局 套 bind， 也 不 用 不 断 地 缓存 this。 


一 些 编程 语言 上 手 很 简单 ， 比 如 Go 语言 手册 可 以 被 快速 读 完 。 然 后 你 差不多 就 掌握 这 门 语言 了 ， 只 是 在 实战 时 会 有 些小 的 问 
题 或 陷 时 在 等 着 你 。 


而 JavaScript 不 是 这 样 的 。 手 册 难 读 。 非 常 多 缺陷 在 里 面 ， 以 至 于 人 们 抽 离 出 了 它 好 的 部 分 (The Good Parts) 。 最 好 的 文 


档 可 能 是 MDN 上 的 了 。 所 以 我 建议 你 看 看 他 上 面 关 于 this 的 介绍 ， 并 且 始 终 在 搜索 JS 相关 问题 时 加 上 "mdn'" 来 获得 最 好 的 文 
档 资 料 。 静 态 代码 检查 也 是 个 不 错 的 工具 ， 上 比如 jshint。 


o MSN 
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在 JavaScript 中 一 切 都 是 对 象 吗 ? 


Él 切 都 是 对 象 "这 个 说 法 一 直 让 我 困惑 。 他 们 指 的 是 什么 ? 一 个 函数 或 者 数组 ， 它 们 怎么 同时 也 是 一 个 对 
象 ?在 我 们 解答 这 个 问题 前 ， 我 们 需要 知道 JavaScript 是 如 何 对 不 同 数 据 类 型 轨 类 的 。 


数据 类 型 

在 JavaScript 中 ， 有 两 个 数据 类 型 : 基本 类 型 和 对 象 类 型 (对 象 类 型 有 时 候 也 被 称 为 引用 类 型 ) 。 
基本 类 型 

Number, String, Boolean, null, undefined 

对 象 类 型 

Function, Object, Array 


根据 这 个 分 类 ， 这 个 问题 的 简单 答案 是 : JavaScript 中 ， 并 非 一 切 值 都 是 对 象 。 是 只 有 属于 对 象 类 型 的 值 才 是 对 象 。 也 可 以 
认为 ， 任 何 非 基本 类 型 的 都 是 对 象 类 型 。 但 是 基本 类 型 和 对 象 类 型 有 什么 区 别 呢 ?更 重要 的 是 ， 人 们 所 说 的 “所 有 ”或 “几乎 所 
有 "的 JavaScript 类 似 都 是 对 象 的 真正 含义 是 什么 ? 这 里 说 说 主要 的 两 个 区 别 : 可 变性 和 比较 。 


Mutability 可 变性 





根据 我 的 经 验 ， 人 们 说 的 值 是 "类似 对 象 "的 真实 含义 是 因为 他 们 的 可 变性 ， 更 具体 的 说 ， 是 支持 添加 和 删除 属性 。 例 如 ， 
ne 你 可 以 像 对 象 一 样 给 它们 添加 属性 。 





var func = function() (); 
func.firstName - "Andrew"; 
func.firstName; // "Andrew" 


var arry H 
arry.age 26; 
arry.age; // 26 


HREF E T ETUSTABUERIZA, wE REAA ERAEN IB A. 





但 是 基本 类 型 是 不 可 变 的， 我 们 无 法 给 它们 添加 属性 。 如 下 面 代码 所 示 ， 即 使 我 们 给 基本 类 型 添加 了 属性 ， 解 析 器 会 无 法 在 
下 一 步 读 取 它 们 的 值 。 


var me = "Andrew"; 
me.lastname = "Robbins"; 
me.lastname; // undefined 
var num - 10; 

num.prop - 11; 

num.prop; // undefined 


在 这 一 点 上 ， 基 本 类 型 的 值 无 法 改变 的 真正 含义 ， 需 要 在 更 基本 的 层面 检查 问题 ， 如 下 代码 所 示 : 


1 = 2; // ReferenceError 
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这 似乎 是 一 个 思春 的 例子 ， 但 是 我 认为 能 反映 出 我 们 现在 讨论 的 可 变性 ， 当 你 在 JavaScript 控 制 器 中 输入 数字 1， 编 译 器 会 给 
其 分 配 基本 类 型 ， 所 以 当 你 尝试 将 数字 1 改变 成 数字 2 会 失败 。 


比较 和 传递 


除了 可 变性 ， 另 外 一 个 基本 类 型 和 对 象 类 型 重要 的 区 别 是 他 们 在 程序 中 比较 和 传递 的 方式 。 基 本 类 型 通过 值 来 比较 ， 而 对 象 
类 型 通过 引用 来 比较 ， 这 是 什么 意思 呢 ? 我 们 先 看 看 基本 类 型 ， 如 下 代码 所 示 : 


"a" === "a"; // true 
因为 值 *a" 等 于 “a” 所 以 为 ttue， 当 我 们 在 图 中 引入 变量 会 发 生 什么 呢 ?除了 将 一 个 基本 类 型 储存 在 变量 中 什么 也 没 发 生 。 


var a - "a", 
b = "a"; 


a === b; // true 


当 基本 类 型 通过 值 来 比较 ， 结 果 为 true， 变 量 a 的 值 正 好 等 于 变量 pb 的 值 ， 换 名 话说 ，"a" 等 于 "a"。 但 是 看 看 下 面 这 个 例子 ， 如 
果 我 们 在 对 象 类 型 中 应 用 相同 的 例子 ， 我 们 会 得 到 相反 的 结果 。 


var a = (name: "andrew"), 
b = (name: "andrew"}; 


a === b; // false 


为 什么 会 这 样 呢 ? 如 果 想 要 两 者 比较 为 真 需要 对 象 类 型 要 引用 同样 的 类 型 。 通 过 以 上 的 例子 ， 我 们 给 变量 b 创 建 一 个 新 的 对 
象 。 就 像 David Flanagan 说 过 : 我 们 说 的 通过 引用 进行 对 象 比较 是 :两 个 对 象 的 值 是 否 相 同 取决 于 它们 是 否 指向 相同 的 底层 对 
象 。 


那 我 们 这 样 传 值 会 发 生 什么 ? 


var a = {name: "andrew"}, 
b = a; 

b.name = "robbins"; 

a === b; // true 


这 个 可 能 开始 看 上 去 很 奇怪 ， 但 是 仔细 看 看 发 生 了 什么 ， 因 为 对 象 是 对 象 类 型 的 一 部 分 ， 它 比较 的 值 是 按 引用 进行 传递 。 引 
用 的 是 相同 的 底层 对 象 。 在 以 上 的 例子 中 ， 我 们 设置 b 等 于 a。 并 没有 创建 新 对 象 ， 我 们 只 是 简单 地 创建 了 一 个 对 其 他 对 象 的 
引用 。 从 另 一 个 方面 来 看 我 们 是 将 变量 b 指 向 a， 所 以 当 我 们 改变 b 的 name 属 性 ， 我 们 同样 改变 了 a 的 name 属 性 。 


如 果 将 相同 的 例子 应 用 在 基本 类 型 上 呢 ? 


var a = "Andrew", 
b = a; 


b - "Robbins"; 


a === b; // false 


当 我 们 设置 b 等 于 a， 请 记 住 基本 类 型 通过 值 来 传递 和 比较 ， 我 们 实际 上 另外 创建 了 一 个 a 的 拷贝 ， 所 以 我 们 改变 b 的 值 再 跟 a 
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比较 ， 两 个 值 是 不 一 样 的 。 
Wrapper Objects 包 装 对 象 


有 些 人 会 说 : “好 ， 如 果 基 本 类 型 不 是 对 象 ， 为 什么 我 们 可 以 调用 他 们 的 方法 呢 " 回答 是 包装 对 象 。 

当 你 尝试 调用 基本 类 型 的 方法 ，JavaScript 在 幕后 做 了 一 个 巧妙 的 处 理 ， 将 你 的 基本 类 型 的 值 转换 成 临时 对 象 用 于 构造 画 
数 ， 决 定 使 用 哪个 构造 画 数 取决 于 你 党 试 改 变 的 基本 类 型 的 值 ， 在 String 中 调用 .length 会 使 用 string() 构 造 画 数 临时 将 基本 类 
型 转变 成 对 象 一 允许 你 使 用 length 方 法 而 改变 它 ， 这 个 临时 对 象 被 称 为 包装 对 象 。 

有 趣 的 是 ，null 和 undefined 这 两 个 基本 类 型 不 能 调用 这 样 的 方法 ， 否 则 会 提示 类 型 错误 。 


我 们 可 以 使 用 typeof 来 区 分 : 


typeof "s"; LI strings 
typeof new String(s); // "object" 


备注 : 在 执行 typeof null 时 js 编译 器 会 返回 object， 是 显而易见 的 bug。 


typeof null // "object" 


当然 ， 考 虑 到 JavaScript 是 用 10 天 写 出 来 (http://www.quora.com/In-which-10-days-of-May-did-Brendan-Eich-write- 
JavaScript-Mocha-in-1995) ， 就 不 过 多 去 担忧 了 :) 。 


此 外 ， 我 们 也 需要 了 解 基本 类 型 的 属性 是 只 读 和 临时 的 。 


var hello = "hello"; 
hello.slice(1); // "ello" (Here we're actually calling slice not on hello, but of a copy of hello) 
hello; // "hello" 


Summary 35.23 


JavaScript 的 值 可 以 分 为 两 种 类 型 : 基本 类 型 和 对 象 类 型 ， 基 本 类 型 有 : String, Number, Boolean, Symbol, undefined 和 
null.， 对 象 类 型 有 Function, Object 和 Array. 


基本 类 型 和 对 象 类 型 的 区 别 在 于 可 变性 和 比较 的 方式 以 及 程序 中 传 值 。 

基本 类 型 是 不 可 变 的 ， 换 种 说 法 就 是 它们 的 值 不 能 改变 。 对 上 比 而 言 ， 对 象 类 型 是 可 变 的 ， 它 们 的 值 可 以 更 新 和 改变 。 

基本 类 型 可 以 按 值 比较 ， 当 我 们 把 一 个 基本 类 型 赋值 给 另外 一 个 基本 类 型 ， 是 复制 了 一 个 值 。 而 对 象 这 是 通过 引用 进行 比 
较 ， 引 用 的 是 什么 呢 ? 引用 的 是 底层 对 象 。 个 对 象 给 另 一 个 对 象 时 。 引 用 指针 就 创建 了 。 在 这 个 情况 下 ， 改 变 
一 个 对 象 的 值 将 更 新 另外 一 个 对 象 的 值 。 


当 我 们 尝试 在 基本 类 型 的 值 中 调用 方法 时 ，JavaScript 使 用 包装 对 象 来 临时 控制 基本 类 型 ， 导 致 对 象 变 为 只 读 的 并 在 垃圾 回 
收 后 执行 。 


参考 资料 


e 在 JavaScript 中 一 切 都 是 对 象 吗 ? 
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JavaScript 进 阶 


讲解 JS 的 高 级 用 法 ， 和 一 些 工 具 。 


JavaScript 进 阶 
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underscore 


这 是 一 个 js 库 文件 ， 相 当 于 一 个 工具 包 ， 提 供 了 一 些 常用 的 功能 扩展 内 置 对 象 ， 上 比如 Array, Function 等 ， 非 常 实用 ! 


Underscore.js 定 义 了 一 个 下 划 线 (C) 对 象 ， 画 数 库 的 所 有 方法 都 属于 这 个 对 象 。 这 些 方 法 大 致 上 可 以 分 成 : 集合 
(collection) 、 数 组 (array) 、 画 数 (function) 、 对 象 (object) 和 工具 (utility) 五 大 类 。 


集合 (collection) 


这 里 提供 的 方法 可 供 数组 和 对 象 使 用 。 方 便 通 历 ， 查 找 以 及 义理 。 


提供 了 类 似 ES5 对 Array 增 加 的 那些 方法 ， 比 如 map, each, some... 

数组 函数 (Array Functions) 

提供 的 方法 供 数组 使 用 ， 包 含 对 数组 的 查找 ， 分 组 ， 生 成 。 

HA (Function (uh, ahem) Functions) 
提供 的 方法 用 于 函数 上 ， 和 包含 对 动态 this 的 绑 定 , 延 时 执行 。 
REKA (Object Functions) 

提供 的 方法 供 对 象 使 用 ， 包 含 检索 ,克隆 等 。 以 及 一 些 isXXX 的 判断 。 

实用 功能 (Utility Functions) 

产生 随机 数 ，html 模 板 生 成 。 


e Underscore Home 
e Underscore 中 文 API 


Underscore 
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Promise 


Promise/Deferred 模型 , 是 一 种 异步 编程 的 模式 。 其 他 的 异步 编程 的 模式 ， 还 有 async 来 控制 , 叫做 流程 控制 。 


现今 流行 的 各 大 js 库 ， 几 乎 都 不 同 程度 的 实现 了 Promise， 如 dojo，jQuery、Zepto、when.js、Q 等 ， 只 是 暴露 出 来 的 大 都 是 
Deferred 对 象 。 


Callback Hell 


var fs = require('fs'); 
fs.readFile('sampleO1.txt', 'utf8', function (err, data) { 
fs.readFile('sampleO2.txt', 'utf8', function (err,data) ( 
fs.readFile('sampleO3.txt', 'utf8', function (err, data) { 
fs.readFile('sampleO04.txt', 'utf8', function (err, data) { 


}); 
35 
H; 


RREME T AIS g Hcallback hell, 


Promise/A+ 规 范 


e 一 个 promise 可 能 有 三 种 状态 : 等 待 (pending) 、 已 完成 (fulfiled) 、 已 拒绝 (rejected) 

e 一 个 promise 的 状态 只 可 能 从 “等 待 " 转 到 “完成 " 态 或 者 “拒绝 " 态 ， 不 能 逆向 转换 ， 同 时 “完成 " 态 和 "拒绝" 态 不 能 相互 转换 

e promise 必 须 实现 then 方 法 (可 以 说 ，then 就 是 promise 的 核心 ) ， 而 且 then 必 须 返 回 一 个 promise， 同 一 个 promise 的 
then 可 以 调用 多 次 ， 并 且 回 调 的 执行 顺序 跟 它们 被 定义 时 的 顺序 一 致 

e then 方 法 接受 两 个 参数 ， 第 一 个 参数 是 成 功 时 的 回调 ， 在 promise 由 "等待 " 态 转换 到 “完成 " 态 时 调用 ， 另 一 个 是 失败 时 的 
回调 ， 在 promise 由 "等 待 " 态 转换 到 “拒绝 " 态 时 调用 。 同 时 ，then 可 以 接受 另 一 个 promise 传 入 ， 也 接受 一 个 “类 then" 的 对 
象 或 方法 ， 即 thenable 对 象 。 


X MN 
参考 资料 


e JavaScript Promise 迷 你 书 

e Promises/A+: 官方 规范 。 

e Promises: 第 三 方 个 人 整理 的 规范 。 
e html5rocks: JavaScript Promises 
e JavaScript Promise & zn 3k 

e 《使 用 promise 替代 回调 函数 》 

e Q 

e When.js 
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callback 问题 


js 编程 遇 到 的 最 大 问题 就 是 单线 程 异步 问题 ， 这 里 面 涉及 最 多 的 肯定 就 是 callback 了 ， 不 能 处 理 好 callback 问 题 ， 常 常会 出 现 
大 量 的 骨 套 情况 ， 就 是 著名 的 callback hell To 


ES6 中 会 引入 一 个 新 的 规范 ， 叫 做 Promise。 这 可 以 规范 我 们 使 用 异步 的 情况 。 
releasing Zalgo 


What it means is a function that accepts a callback and sometimes returns it right away, and some other times it returns it 
after some delay, in the future. 


就 是 我 们 的 代码 之 中 的 callback, 可 能 sync， 也 可 能 async 触 发 ， 比 如 : 


function register(options, callback) { 
var first name - (options['first name'] || '').trim(); 
var last name - (options['last name'] || '').trim(); 
var errors - []; 


if (!first name) ( 


errors.push(['first name', 'Please enter a valid name']); 
} 
if (!last name) { 

errors.push(['last name', 'Please enter a valid name']); 
J 


if (errors.length) { 
return callback(null, errors); 


} 


var params = ( 
'user': ( 
'email': options['email'], 
'first name': first name, 
'last name': last name, 
'new password': options['new password'], 
'new password confirmation': options['new password confirmation'], 


melamS e aeni 
} 
'vrid': options['vrid'], 
'merge history': options['merge history'] || 'true' 
YN 
requestWithSignature('post', '/api/v2/users', params, callback) 


而 最 好 的 做 法 ， 是 保证 callback 全 是 sync 或 者 async， MAEAEA A: 


if (errors.length) { 
process.nextTick(function() { 
callback(null, errors); 


35 


return; 


H 
就 可 以 避免 releasing Zalgo o 


A MSN 


£z 
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e Callback 在 大 型 编程 时 的 一 般 性 问题 
e Designing APIs for Asynchrony 
e Don't release Zalgo! 


Callback jv] i 
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JavaScript 设 计 模 式 


e 深入 理解 JavaScript 系 列 

e 常用 的 JavaScript 设 计 模 式 

e 前 端 攻略 系列 (三 ) - javascript 设计 模式 (文章 很 长 ， 请 自 备 瓜子 ， 水 果 和 眼 药 水 ) 
e JavaScript Patterns 

e Learning JavaScript Design Patterns 


JavaScript 设 计 模 式 
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从 需 开 始 写 JavaScript 框 架 


X VAN 
参考 资料 


e 从 规 开 始 编写 JavaScript 框 架 

e 我 是 怎么 写 JavaScript 框 架 的 (一) 
e 专题 : jQuery 系列 源码 分 析 

e 慕 课 网 :jQuery 源码 解析 

e Vanilla JS 


Hl 
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第 一 个 框架 ， 我 们 选择 模仿 jQuery, 这 是 目前 web 之 中 使 用 最 广泛 的 一 个 库 。 


这 个 框架 暂时 就 叫做 mock.js, 模仿 学 习 的 意思 。 
闭 包 


js 的 变量 作用 域 是 按 函 数 划 分 的 ， 闭 包 是 函数 内 部 的 画 数 ， 能 够 有 效 的 保 折 好 变量 不 污染 外 部 。 需 要 外 部 的 接口 ， 通 过 
window 挂 载 出 去 。 上 比如 这 样 : 


(function() { 
var Mock = function() { 


}; 
Mock.version = '0.0.1'; 


window.M = Mock; 


DOF 


模块 


Je MS 
参考 $r 料 


e 逐 行 分 析 jQuery 源 码 的 奥秘 
e 专题 : jQuery 系列 源码 分 析 


框架 结构 
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JavaScript 模 块 管理 





JavaScript 模 块 管理 
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模块 化 简介 


需要 模块 管理 的 原因 就 是 JavaScript 发 展 的 越 来 越 快 ， pie 产生 时 候 的 自我 定位 。 由 于 没有 模块 管理 的 概念 ， 在 做 大 型 
项 目 或 者 文件 组 织 的 时 候 ， 就 会 异常 纠结 。 所 以 才 会 产生 出 这 么 多 的 模块 管理 工具 。 


CommonJS 


2009 ~ 2010 年 间 ，CommonJS 社区 大 牛 云集 ， 稍 微 了 解 点 历史 的 同学 都 清楚 ， 在 同时 间 出 现 了 nodejs， 一 下 子 让 
javaScript 摇身一变 ， 有 了 新 的 用 武之 地 ， 同 时 在 nodejs 推 动 下 的 CommonJS 模块 系统 也 是 逐渐 深入 人 心 : 





e 通过 require 就 可 以 引入 一 个 module， 一 个 module 通 过 exports 来 导出 对 外 暴露 的 属性 接口 ， 在 一 个 module 里 面 没有 
通过 exports 暴露 出 来 的 变量 都 是 相对 于 module 私 有 的 

e module 的 查找 也 有 一 定 的 策略 ， 通 过 统一 的 package.json 来 进行 module 的 依赖 关系 配置 ，require 一 个 module 只 需 
require package.json 里 面 定义 的 name 即 可 


这 样 的 实现 确实 很 好 ， 但 是 一 个 最 大 的 问题 就 是 在 浏览 器 加 载 脚本 天 生 不 支持 同步 的 加 载 ， 无 法 通过 文件 MO 同步 的 require 加 


载 一 个 js 脚本 。So what ? CommonJS 中 逐渐 分 裂 出 了 AMD， 这 个 在 浏览 器 环境 有 很 好 支持 的 module 规 范 ， 其 中 最 有 代表 
性 的 实现 则 是 requirejs。 


AMD 


The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its de 
E 


翻译 过 来 就 是 说 : 异步 模块 规范 API 定义 了 一 种 模块 机 制 ， 这 种 机 制 下 ， 模 块 和 它 的 依赖 可 以 异步 的 加 载 。 这 个 非常 适合 于 
浏览 器 环境 ， 因 为 同步 的 加 载 模块 会 对 性 能 ， 可 用 性 ，debug 调 试 ， 跨 域 访 问 产生 问题 。 





确实 ， 在 浏览 器 环境 下 ，AMD 有 着 自己 独特 的 优势 : 由 于 源码 和 浏览 器 加 载 的 一 致 ， 所 见 即 所 得 ， 代 码 编写 和 debug 非 常 方 
便 。 尤 其 是 在 多 页 面 的 web 项 目下 ， 不 同 页 面 的 脚本 js 都 是 根据 依赖 关系 异步 按 需 加 载 的 ， 不 用 手动 处 理 每 个 页 面 加 载 js 脚本 
的 情况 。 


但 是 ，AMD 不 得 不 承认 的 作为 一 个 module system 的 不 足 之 处 。 请 问 ? 在 AMD(reduireJS) 里 面 怎么 使 用 一 个 第 三 方 
库 的 ?一 般 都 会 经 历 这 人 么 几 个 步骤 : 


e 使 用 的 第 三 方 库 不 想 成 为 global 的 ， 只 有 引用 的 地 方才 可 见 
e 需要 的 库 支 不 支持 AMD ? 

e 不 支持 AMD， 我 需要 fork 提 个 patch 吗 ? 

e 支持 AMD， 我 的 项 目 根 路 径 在 哪儿 ? 库 在 哪儿 ? 

e 不 想 要 使 用 库 的 全 部 ， 要 不 要 配置 个 shim ? 

e 需 不 需要 配置 个 alias ? 


一 个 库 就 需要 问 这 人 么 些 个 问题 ， 而 且 都 是 人 工 手 动 的 操作 。 最 最 关键 的 问题 是 你 辛 辛 苦 苦 搞定 的 配置 项 都 是 相对 于 你 当前 项 
目的 。 当 你 想 用 在 其 他 项 目 或 者 是 单元 测试 ， 那 么 OK， 你 还 得 修改 一 下 。 因 为 ， 你 相对 的 是 当前 项 目的 根 路 径 ， 一 且 根 路 径 
发 生 改变 ， 一 切 都 发 生 了 变化 。 


requireJS 使 用 之 前 必须 配置 ， 同 时 该 配置 很 难 重用 . 


CommonJS in browser 
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Hb F CommonJS 里 面 如 果 要 使 用 一 个 第 三 方 库 的 话 ， 仅 仅 只 需要 在 package.json 里 面 配置 一 下 库 名 和 版 本 号 ， 然 后 
npm install 一 下 之 后 就 可 以 直接 require 使 用 的 方式 ，AMD 的 义理 简直 弱 爆 了 山 


对 于 AMD 的 这 个 不 足 之 处 ， 又 有 社区 大 神 提 出 了 可 以 在 browser 运行 的 CommonJS 的 方式 ， 并 且 通 过 模块 定义 配置 文 
件 ， 可 以 很 好 的 进行 模块 复 用 。 上 比较 知名 的 就 有 substack 的 browserify, tj 便 主 导 的 component， 还 有 后 来 的 duo, 
webpack， 时 代 就 转眼 进入 了 browser 上 的 CommonJS. 


由 于 CommonJS 的 require 是 同步 的 ， 在 require 处 需要 阻塞 ， 这 个 在 浏览 器 上 并 没有 很 好 的 支持 (浏览 器 只 能 异步 加 载 脚 
本 ， 并 没有 同步 的 文件 /0O) , CommonJS 要 在 browser 上 直接 使 用 则 必须 有 一 个 build 的 过 程 ， 在 这 个 build 的 过 程 里 进行 
依赖 关系 的 解析 与 做 好 映射 。 这 里 有 一 个 典型 的 实现 就 是 substack 的 browserify。 


browserify 


browserify 在 github 上 的 README.md 解释 是 : 


require('modules') in the browser 
Use a node-style require() to organize your browser code and load modules installed by npm. 


browserify will recursively analyze all the require() calls in your app in order to build a bundle you can serve up to 


JE — r——A—ÀÀL 


在 browserify 里 可 以 编写 nodejs 一 样 的 代码 ( 即 CommonJS 以 及 使 用 package.json 进 行 module 管 理 ) ，browserify 会 递归 的 
解析 依赖 关系 ， 并 把 这 些 依赖 的 文件 全 部 build 成 一 个 bundle 文 件 ， 在 browser 端 使 用 则 直接 用 «script» tag 引入 这 个 bundle 
文件 即 可 . 





component 
component 通过 component.json 来 进行 依赖 描述 ， 它 的 库 管理 是 基于 github repo 的 形式 ， 由 于 进行 了 显示 的 配置 依赖 ， 它 


并 不 需要 对 源码 进行 require 关系 解析 ， 但 是 时 刻 需 要 编写 component.json 也 使 得 开发 者 非常 的 痛苦 ， 开 发 者 更 希望 code 
over configuration 的 形式 


duo 


Duo is a next-generation package manager that blends the best ideas from Component, Browserify and Go to make organizir 
BEE] 


webpack 





webpack 是 一 个 module bundler 即 模块 打包 工具 ， 它 支持 CommonJS，AMD 的 module 形 式 ， 同 时 还 支持 code splitting, 
css 等 


小 结 


这 些 browser 上 的 CommonJS 解决 方案 都 有 一 个 共同 的 问题 ， 就 是 无 法 避免 的 需要 一 个 build 过 程 ， 这 个 过 程 虽 然 可 以 通过 
watch task 来 进行 自动 化 ， 但 是 还 是 edit 和 debug 还 是 非常 不 方便 的 


试想 着 ， 你 在 进行 debug， 你 设置 了 一 个 debugger， 然 后 单 步 调试 ， 调 试 调试 着 跳 到 了 另外 一 个 文件 中 ， 然 后 由 于 是 一 个 
bundle 大 文件 ， 你 在 浏览 器 开发 者 工具 看 到 的 永远 都 是 同一 个 文件 ， 然 后 你 发 现 了 问题 所 在 ， 回 头 去 改 源码 ， 还 得 先 找 到 当 
前 所 在 行 与 源码 的 对 应 关系 ! 当然 这 个 可 以 通过 source map 技术 来 进行 解决 ， 但 是 相 上 比较 AMD 那 种 所 见 即 所 得 的 开发 模式 
还 是 有 一 定 差距 


同时 ， 需 要 build 的 过 程 也 给 多 页 面 应 用 开发 带 来 了 很 多 麻烦 ， 每 个 页 面 都 要 配置 watch task， 都 要 配置 source map 之 类 
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的 ， 而 且 build 过 程 如 果 一 旦 出 现 了 build error， 开 发 者 还 要 去 看 看 命令 行 里 面 的 日 志 ， 除 非 使 用 beefy 这 种 可 以 把 命令 行 里 
面 的 日 志 输 出 到 浏览 器 console， 和 否则 不 知道 情况 的 开发 者 就 会 一 脸 迷 范 


CommonJS vs AMD 


CommonJS 


e 优点 : 简洁 ， 更 符合 一 个 module system, E} module 库 的 管理 也 非常 方便 
e 缺点 : 浏览 器 环境 必须 build 才 能 使 用 ， 给 开发 过 程 带 来 不 便 


AMD 
e 优点 : 天 生 异 步 ， 很 好 的 与 浏览 器 环境 进行 结合 ， 开 发 过 程 所 见 即 所 得 


e 缺点 : 不 怎么 简洁 的 module 使 用 方式 ， 第 三 方 库 的 使 用 时 的 重复 繁琐 配置 


更 进一步 的 bearcat 


bearcat 的 一 个 理念 可 以 用 下 面 一 句 话 来 描述 : Magic, self-described javaScript objects build up elastic, maintainable front- 
backend javaScript applications 


bearcat 所 倡导 的 就 是 使 用 简单 、 自 描述 的 javaScript 对 象 来 构建 弹性 、 可 维护 的 前 后 端 javaScript 应 用 。 当 然 可 能 有 人 会 说 ， 
javaScript 里 面 不 仅仅 是 对 象 ， 还 可 以 辑 数 式 、 元 编程 什么 的 ， 其 实 也 是 要 看 应 用 场景 的 ，bearcat 更 适合 的 场景 是 一 个 多 人 
协作 的 、 需 要 持续 维 折 的 系统 (应 用 ) ， 如 果 是 快速 开发 的 脚本 、 工 具 、 库 ， 那 么 则 该 怎么 简单 、 怎 么 方便 ， 就 怎么 来 。 


X AN 
参考 $r 料 


e Bearcat 

e WebPack : 更 优秀 的 模块 依赖 管理 工具 ， 及 require.js 的 缺陷 
e browserify 

e component 


e duo 

e webpack 

e bearcat 

e Javascript 模 块 化 编程 (一) : 模块 的 写法 

e Javascript 模 块 化 编程 (二 ) : AMD 规 范 

e Javascript 模块 化 编程 (三) : require.js 的 用 法 
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requireJS 


e RequireJSA;] (一 ) 
e RequireJS 进 阶 (二 ) 
e ReduireJS 进 阶 (三 ) 


requireJS 
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入 门 使 用 


还 是 先 看 官网 : requirejs.org， 中 间 就 有 一 个 getting start, 点 击 开始 入 门 。 


要 先 使 用 ， 先 要 搭建 环境 ， 对 于 javascript 文 件 ， 下 载 即 可 。 进 入 GET REQUIREJS 下 载 最 新 版 本 的 requireJS 文 件 。 


在 下 载 页 面 ， 还 有 其 他 几 个 文件 : 


e rjs: 优化 ， 压 缩 文件 的 工具 

e text: 加 载 文 本 文件 的 插件 

e domReady: 确保 文件 在 domReady 后 执行 的 插件 
e cs: 支持 CoffeeScript 的 插件 

e i18n: 多 语言 版 本 支持 的 插件 


添加 到 项 目 中 
下 面 的 例子 假设 所 有 的 文件 都 在 script 目录 下 ， 目 录 结 构 为 : 


project-directory/ 
project.html 
scripts/ 
main.js 
helper/ 
util.js 


把 redquireJS 加 入 到 script 目 录 下 : 


project-directory/ 
project.html 
scripts/ 
main.js 
require.js 
helper/ 
util.js 


接 下 来 ， 在 «head» 中 或 者 <body> 之 前 ， 插 入 : 


<!-- data-main attribute tells require.js to load 
scripts/main.js after require.js loads. --» 
«script data-main-z"scripts/main" srcz"scripts/require.js"»«/script» 


data-main 指出 的 脚本 文件 ， 是 异步 加 载 的 。 我 们 这 里 的 main 就 是 script/main.js 文件 ， 里 面 内容 可 以 如 下 : 


require(["helper/util"], function(util) { 
//This function is called when scripts/helper/util.js is loaded. 
//If util.js calls define(), then this function is not fired until 
//util's dependencies have loaded, and the util argument will hold 
//the module value for "helper/util". 


D 





和 人 门 使 用 
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这 里 提 一 下 require 和 define 的 区 别 : 


e require 的 依赖 只 


要 自身 加 载 完 成 ， 就 会 调用 


e define 定 义 的 ， 所 有 依赖 都 加 载 完了 才 会 被 触发 


编写 代码 


真正 详细 的 入 门 ， 其 


实在 Require API, 


但 是 一 般 而 言 ， 会 在 data-mian 的 文件 中 ， 写 入 配置 文件 ， 类 似 : 


require.config({ 


/* global metadata */ 


baseUrl: './' 


L 


waitSeconds: 0, 
paths: { 

'domReady': 'bower components/domReady/domReady', 

'modernizr': 'bower components/modernizr/modernizr', 

"jquery": "bower components/jquery/dist/jquery", 

'jquery.easing': 'bower components/jquery.easing/js/jquery.easing' 
shim: ( 


'jquery.easing': ['jquery'] 


u 
packages: [t 


name: 'gsap', 


main: 
location: 


11 
, 


H 
3) 





AT EH 











'bower. components/gsap/src/uncompressed' 
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压缩 优化 


开发 时 候 的 模式 ， 各 个 模块 其 实 都 被 加 到 了 head 部 分 ， 然 后 变 成 单独 的 请 求 ， 对 于 开发 环境 ， 我 们 有 一 个 优化 的 重点 ， 就 是 


减少 请 求 数 。 所 以 我 们 要 使 用 工具 ， 将 开发 环境 的 js 文件 进行 合并 压缩 。 


r.js 


官方 提供 的 一 个 优化 工具 ， 推 荐 自己 再 写 一 个 build.js 文 件 。 上 比如 : 


baseuri eU 

name: "scripts/config", 
mainConfigFile: "scripts/config.js", 
out: "main-built.js", 

optimize: "none" 


» 


然后 使 用 r.js -o build.js , 就 可 以 进行 文件 的 合并 了 。 但 这 里 是 所 有 文件 都 在 本 地 的 情况 。 且 压缩 的 是 require 依 赖 部 分 ， 
实际 请 求 数 还 是 两 个 ， 另 一 个 是 require.js 本 身 。 如 果 需 要 合并 为 一 个 ， 再 进行 一 次 concat 操 作 。 





build.js 使 用 的 选项 可 以 在 all configuration options 查 询 。 


gulp 


gulp-requirejs 





项 目地 址 :gulp-requirejs。 目 前 处 于 out-of-date 状 态 。 


使 用 方法 : 


var gulpRequire = require('gulp-requirejs'); 


// optimize requireJS 
gulp.task('optimize', function() { 
gulpRequire(1 
baseUrl: "src", 
include: ['scripts/config'], 
mainConfigFile: "src/scripts/config.js", 
out: "main-built.js", 
optimize: "none" 
J) 
.pipe(gulp.dest('dist/')); 
3: 


gulp-requirejs-optimize 


项 目地 址 :gulp-requirejs-optimize。 
grunt 


grunt-contrib-requirejs 


压缩 优化 
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项 目地 址 :grunt-contrib-requirejs 


使 用 方法 : 


grunt.loadNpmTasks('grunt-contrib-requirejs'); 


requirejs: { 
compile: ( 
options: ( 
baseUrl: "path/to/base", 
mainConfigFile: "path/to/config.js", 
name: "path/to/almond", // assumes a production build using almond 
out: "path/to/optimized.js" 


压缩 优化 
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JavaScript 数 据 结 构 


y M8 
参考 资料 


e data-structure-with-js 


JavaScript 数 据 结构 
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数据 类 型 


讲解 数据 结构 之 前 ， 我 想 先 理 清 一 下 JS 中 的 基本 数据 类 型 。 





数据 类 型 


in 





b 





piim CIEI 


JavaScript R d i fe 


JavaScript 7b d f 
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step1(function(res1){ 
step2(function(res2){ 
step3(function(res3){ 
Zu 


解 耦 程度 特别 低 ， 如 果 送 入 的 参数 太 多 会 显得 很 乱 ERA LAAR, BRUA BROSA, Nm. 


事件 监听 


f.on("evt", g); 
function f(){ 
setTimeout(function()( 
f.trigger("evt"); 
» 


JS 和 浏览 器 提供 的 原生 方法 基本 都 是 基于 事件 触发 机 制 的 ， 耦 合 度 很 低 ， 不 过 事件 不 能 得 到 流程 控制 。 


发 布 /订阅 (Pub/Sub ) 


E.subscribe("evt", g); 
function f(){ 
setTimeout(function () { 
// f 的 任务 代码 
E.publish("evt"); 
), 1000); 





把 事件 全 部 交 给 E 这 个 控制 器 管理 ， 可 以 完全 掌握 事件 被 订阅 的 次 数 ， 以 及 订阅 者 的 信息 ， 管 理 起 来 特别 方便 。 





Promise 对 象 





Promise/A+ 规范 是 对 Promise/A 规范 的 补充 和 修改 ， 他 出 现 的 目的 是 为 了 统一 异步 编程 中 的 接口 ，JS 中 的 异步 编程 是 十 分 


普 静 的 事情 ， 也 出 现 了 很 多 的 异步 库 ， 如 果 不 统一 接口 ， 对 开发 者 来 说 也 是 一 件 十 分 痛苦 的 事情 。 

在 Promises/A 规 范 中 ， 每 个 任务 都 有 三 种 状态 : 默认 (pending)、 完 成 (fulfiled)、 失 败 (rejected)。 

e 默认 状态 可 以 单 向 转移 到 完成 状态 ， 这 个 过 程 叫 resolve， 对 应 的 方法 是 deferred.resolve(promiseOrValue) ; 
e 默认 状态 还 可 以 单 向 转移 到 失败 状态 。 这 个 过 程 叫 reject， 对 应 的 方法 是 deferred.reject(reason) ; 


e 默认 状态 时 ， 还 可 以 通过 deferred.notify(update) 来 宣告 任务 执行 信息 ， 如 执行 进度 ; 
e 状态 的 转移 是 一 次 性 的 ， 一 旦 任务 由 初始 的 pending 转 为 其 他 状态 。 就 会 进入 到 下 一 个 任务 的 执行 过 程 中 。 


常见 的 异步 模式 


80 





piim CIEI 





参考 资 
-人 
ez pl 


e JavaScript 异 步 编程 原理 
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什么 是 Promise 


Promise/Deferred 模型 , 是 一 种 异步 编程 的 模式 。 其 他 的 异步 编程 的 模式 ， 还 有 async 来 控制 , 叫做 流程 控制 。 


现今 流行 的 各 大 js 库 ， 几 乎 都 不 同 程度 的 实现 了 Promise， 如 dojo，jQuery、Zepto、when.js、Q 等 ， 只 是 暴露 出 来 的 大 都 是 
Deferred 对 象 。 


Callback Hell 


var fs = require('fs'); 
fs.readFile('sampleO1.txt', 'utf8', function (err, data) { 
fs.readFile('sampleO2.txt', 'utf8', function (err,data) ( 
fs.readFile('sampleO3.txt', 'utf8', function (err, data) { 
fs.readFile('sampleO04.txt', 'utf8', function (err, data) { 


}); 
35 
H; 


RREME T AIS g Hcallback hell, 


Promise/A+ 规 范 


e 一 个 promise 可 能 有 三 种 状态 : 等 待 (pending) 、 已 完成 (fulfiled) 、 已 拒绝 (rejected) 

e 一 个 promise 的 状态 只 可 能 从 “等 待 " 转 到 “完成 " 态 或 者 “拒绝 " 态 ， 不 能 逆向 转换 ， 同 时 “完成 " 态 和 "拒绝" 态 不 能 相互 转换 

e promise 必 须 实现 then 方 法 (可 以 说 ，then 就 是 promise 的 核心 ) ， 而 且 then 必 须 返 回 一 个 promise， 同 一 个 promise 的 
then 可 以 调用 多 次 ， 并 且 回 调 的 执行 顺序 跟 它们 被 定义 时 的 顺序 一 致 

e then 方 法 接受 两 个 参数 ， 第 一 个 参数 是 成 功 时 的 回调 ， 在 promise 由 "等待 " 态 转换 到 “完成 " 态 时 调用 ， 另 一 个 是 失败 时 的 
回调 ， 在 promise 由 "等 待 " 态 转换 到 “拒绝 " 态 时 调用 。 同 时 ，then 可 以 接受 另 一 个 promise 传 入 ， 也 接受 一 个 “类 then" 的 对 
象 或 方法 ， 即 thenable 对 象 。 


X MN 
参考 资料 


e JavaScript Promise 迷 你 书 

e Promises/A+: 官方 规范 。 

e Promises: 第 三 方 个 人 整理 的 规范 。 
e html5rocks: JavaScript Promises 
e JavaScript Promise & zn 3k 

e 《使 用 promise 替代 回调 函数 》 

e Q 

e When.js 
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Promise 规 范 


从 历史 上 说 ， Promises/A- 规范 将 之 前 Promises/A 规范 的 建议 明确 为 了 行为 标准 。 其 扩展 了 原 规范 以 覆盖 一 些 约定 俗 成 的 
行为 ， 以 及 省 略 掉 一 些 信 在 特定 情况 下 存在 的 或 者 有 问题 的 部 分 。 


核心 的 Promises/A+ 规范 不 设计 如 何 建立 、 执 行 、 拒 绝 promises， 而 是 专注 于 提供 一 个 可 互 操作 的 then 方法 。 上 述 对 于 
promises 的 操作 方法 将 来 在 其 他 规范 中 可 能 会 触及 。 


Promise 的 状 太 


用 new Promise 实例 化 的 promise 对 象 有 以 下 三 个 状态 


e "has-resolution" Fulfilled: resolve( 成 功 ) 时 。 此 时 会 调用 onFulfilled 
e "has-rejection" Rejected: reject( 失 败 ) 时 。 此 时 会 调用 onRejected 
e "unresolved" Pending: 既 不 是 resolve 也 不 是 reject 的 状态 。 也 就 是 promise 对 象 刚 被 创建 后 的 初始 化 状态 等 


关于 上 面 这 三 种 状态 的 读 法 ， 其 中 左 侧 为 在 ES6 Promises 规范 中 定义 的 术语 ， 而 右 侧 则 是 在 Promises/A+ 中 描述 状态 的 
术语 。 


promise 对 象 的 状态 ， 从 Pending 转 换 为 Fulfilled 或 Rejected 之 后 ， 这 个 promise 对 象 的 状态 就 不 会 再 发 生 任何 变化 。 也 就 是 
说 ，Promise 与 Event 等 不 同 ， 在 .then 后 执行 的 画 数 可 以 表 定 地 说 只 会 被 调用 一 Re 


Then 方法 


一 个 promise 必须 提供 一 个 then 方法 以 访问 其 当前 值 、 最 终 返 回 值 和 据 因 。promise 的 then 方法 接受 两 个 参数 : 


promise.then(onFulfilled, onRejected) 


1. onFulfilled 和 onRejected 都 是 可 选 参数 。 
o 如 果 onFulfilled 不 是 函数 ， 其 必须 被 忽略 
o 如 果 onRejected 不 是 函数 ， 其 必须 被 忽略 
2. 如 果 onFulfilled 是 函数 : 
o 当 promise 执行 结束 后 其 必须 被 调用 ， 其 第 一 个 参数 为 promise 的 值 
o 在 promise 执行 结束 前 其 不 可 被 调用 
o 其 调用 次 数 不 可 超过 一 次 
3. 如 果 onRejected ZEIZ : 
o 当 promise 被 拒绝 执行 后 其 必须 被 调用 ， 其 第 一 个 参数 为 promise 的 据 因 
o 在 promise 被 拒绝 执行 前 其 不 可 被 调用 
o 其 调用 次 数 不 可 超过 一 次 
4. onFulfilled 和 onRejected 直到 执行 环境 堆栈 尽 包 含 平台 代码 前 不 可 被 调用 
5. onFulfilled 和 onRejected 必须 被 作为 函数 调用 GPA this 值 ) 
6. then 方法 可 以 被 同一 个 promise 调用 多 次 
o 当 promise 成 功 执行 时 ， 所 有 onFulfilled 需 按照 其 注册 顺序 依次 回调 
o 当 promise 被 拒绝 执行 时 ， 所 有 的 onRejected 需 按 照 其 注册 顺序 依次 回调 
7. then 方法 必须 返回 一 个 promise 对 象 , 如 promise2 = promisei.then(onFulfilled, onRejected); 
o 如 果 onFulfilled 或 者 onRejected 返回 一 个 值 x ， 则 运行 下 面 的 Promise 解决 程序 : [[Resolve]](promise2, x) 
o 如 果 onFulfilled 或 者 onRejected 抛 出 一 个 异常 e W) promise2 必须 拒绝 执行 ， 并 返回 拒 因 e 
o 如 果 onFulfilled 不 是 函数 且 promise1 成 功 执行 ， promise2 必须 成 功 执行 并 返回 相同 的 值 
o 如 果 onRejected 不 是 函数 且 promise1 拒绝 执行 ， promise2 必须 拒绝 执行 并 返回 相同 的 据 因 
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Promise 解决 程序 


Promise 解 决 程序 是 一 个 抽象 的 操作 ， 其 需 输 入 一 个 promose 和 一 个 值 ， 我 们 表示 为 [[Resolve]] (promise, x), WMR x 是 
thenable 的 ， 同 时 若 x 至 少 满足 和 promise 类 似 〈 即 鸭子 类 型 ， x 拥有 部 分 或 全 部 promise 拥有 的 方法 属性 ) 的 前 提 ， 解 决 
程序 即 尝 试 使 promise 接受 x 的 状态 ; 否则 其 用 x 的 值 来 执行 promise 。 


这 种 对 thenable 的 操作 人 允许 promise 实现 互 操作 ， 只 要 其 暴露 出 一 个 遵循 Promise/A+ 协议 的 then 方法 。 
运行 [[Resolve]](promise，x) 需 遵循 以 下 步骤 : 


1. 如 果 promise 和 x 指向 同一 对 象 ， 以 TypeError 为 据 因 拒绝 执行 promise 
2. 如 果 x 为 promise ， 接 受 其 状态 
o 如 果 x 处 于 等 待 态 ， promise 需 保持 为 等 待 态 直至 x 被 执行 或 拒绝 
o 如 果 x 处 于 执行 态 ， 用 相同 的 值 执行 promise 
o 如 果 x 处 于 拒绝 态 ， 用 相同 的 据 因 拒绝 promise 
3. 抑或 x 为 对 象 或 者 函数 
o 设置 then 方法 为 x.then 
o 如 果 then 是 函数 ， 将 x 作为 函数 的 作用 域 this 调用 之 。 其 第 一 个 参数 为 resolvePromise ， 第 二 个 参数 为 
rejectPromise: 
m 如果 resolvePromise 以 值 y 为 参数 被 调用 ， 则 运行 [[Resolve]] (promise, y) 
a 如 果 rejectPromise MA r 为 参数 被 调用 ， 则 以 据 因 Tr 拒绝 promise 
wm 如果 resolvePromise 和 rejectPromise 均 被 调用 ， 或 者 被 同一 参数 调用 了 多 次 ， 则 优先 采用 首次 调用 和 忽略 剩 
下 的 调用 
m 如果 调用 then 方法 抛 出 了 异常 e: 
wm 如 果 resolvePromise 或 rejectPromise 已 经 被 调用 ， 则 忽略 之 
m 否则 以 e 为 据 因 拒绝 promise 
a 如 果 then 不 是 函数 ， 以 x 为 参数 执行 promise 
o 如 果 x 不 为 对 象 或 者 函数 ， 以 x 为 参数 执行 promise 


如 果 一 个 promise 被 一 个 循环 的 thenable 链 中 的 对 象 解决 ， 而 [[Resolve]](promise，thenable) 的 递归 性 质 又 使 得 其 被 再 次 
调用 ， 根 据 上 述 的 算法 将 会 陷 人 无 限 递归 之 中 。 算 法 不 强制 要 求 ， 但 鼓励 其 实施 者 以 检测 这 样 的 递归 是 否 存 在 ， 若 存在 则 以 
一 个 可 识别 的 TypeError 为 据 因 来 拒绝 promise, 


e Promises 

e Promises/A* 

e Promise/A+ 规 范 中 文 翻 译 

e MDN: Promise 

e promise api 与 应 用 场景 

e JavaScript Promise 迷 你 书 (中 文 版 ) 

e w3ctag/promises-guide: Promises 指 南 - 这 里 有 很 多 关于 概念 方面 的 说 明 。 

e domenic/promises-unwrapping: ES6 Promises 规 范 的 repo - 可 以 通过 查看 issue 来 了 解 各 种 关于 规范 的 来 龙 去 脉 和 信 
E 

e ECMAScript Language Specification ECMA-262 6th Edition - DRAFT: ES6 Promises 的 规范 - 如 果 想 参考 关于 ES6 
Promises 的 规范 ， 则 应 该 先 看 这 里 

e JavaScript Promises: There and back again - HTML5 Rocks: 关于 Promises 的 文章 - 这 里 的 示例 代码 和 参考 

(reference) 的 完成 度 都 很 高 
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Promise 实 战 


在 很 多 需要 与 数据 打交道 的 场合 下 ， 我 们 会 遇 到 很 多 异步 的 情况 ,在 异步 操作 的 时 候 ， 我 们 还 需要 处 理 成 功 和 失败 两 种 情况 ， 
并 且 成 功 的 时 候 ， 还 可 能 需要 把 结果 传递 给 下 一 个 Ajax 调 用 ， 从 而 形成 " 范 数 藤 套 "的 情况 。callback 是 编写 Javascript 异 步 代 
码 最 最 最 简单 的 机 制 。 可 用 这 种 原始 的 callback 必 须 以 特 牲 控制 流 、 异 常 处 理 和 辑 数 语义 为 代价 。 


具体 实现 的 库 


Polyfill 
只 需要 在 浏览 器 中 加 载 Polyfill 类 库 ， 就 能 使 用 IE10 等 或 者 还 没有 提供 对 Promise 支 持 的 浏览 器 中 使 用 Promise 里 规定 的 方法 。 


e jakearchibald/es6-promise: 一 个 兼容 ES6 Promises 的 Polyfill 类 库 。 它 基于 RSVPjs 这 个 兼容 Promises/A+ 的 类 库 ， 
它 只 是 RSVPjs 的 一 个 子 集 ， 只 实现 了 Promises 规定 的 API 

e yahoo/ypromise: 这 是 一 个 独立 版 本 的 YUI 的 Promise Polyfilll， 具 有 和 ES6 Promises 的 兼容 性 。 

e getify/native-promise-only: 以 作为 ES6 Promises 的 polyfill 为 目的 的 类 库 它 严格 按照 ES6 Promises 的 规范 设计 ， 没 有 添 
加 在 规范 中 没有 定义 的 功能 。 如 果 运 行 环境 有 原生 的 Promise 支 持 的 话 ， 则 优先 使 用 原生 的 Promise 支 持 。 


扩展 类 库 
Promise 扩 展 类 库 除了 实现 了 Promise 中 定义 的 规范 之 外 ， 还 增加 了 自己 独自 定义 的 功能 。 


e then/promise: a super set of ES6 Promises designed to have readable, performant code and to provide just the 
extensions that are absolutely necessary for using promises today. 

e petkaantonov/bluebird: 这 个 类 库 除 了 兼容 Promise 规范 之 外 ， 还 扩展 了 取消 promise 对 象 的 运行 ， 取 得 promise 的 运行 
进度 ， 以 及 错误 处 理 的 扩展 检测 等 非常 丰富 的 功能 ， 此 外 它 在 实现 上 还 在 性 能 问题 下 了 很 大 的 功夫 。 

e when: 大 小 很 小 ,node 和 浏览 器 环境 下 都 可 以 使 用 。 

e q: 类 库 Q 实现 了 Promises 和 Deferreds 等 规范 。 它 自 2009 年 开始 开发 ， 还 提供 了 面向 Node.js 的 文件 IO API Q-IO 
等 ， 是 一 个 在 很 多 场景 下 都 能 用 得 到 的 类 库 。 


编写 Promise 代 码 


创建 流程 


e 使 用 new Promise(fn) 返回 一 个 Promise 对 象 

e 在 fn 中 制定 异步 等 处 理 : 
o 处 理 结果 正常 的 情况 ， 调 用 resolve( 处 理 结果 值 ) 
o 义理 结果 错误 的 话 ,调用 reject(Error 对 象 ) 





创建 Promise 对 象 


最 基本 的 情况 ， 是 使 用 new Promise() 来 创建 Promise 对 象 。 也 可 以 使 用 Promise.resolve(value) 代替 new Promise() 快捷 方 
法 。 比 如 : 


Promise.resolve(42); 

// 等 价 于 

new Promise(function(resolve) { 
reslove(42); 


» 
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Thenable 


就 像 我 们 有 时 称 具 有 length 方法 的 非 数组 对 象 为 Array like 一 样 ，thenable 指 的 是 一 个 具有 .then 方法 的 对 象 。 


这 种 将 thenable 对 象 转换 为 promise 对 象 的 机 制 要 求 thenable 对 象 所 拥有 的 then 方法 应 该 和 Promise 所 拥有 的 then 方法 具有 
同样 的 功能 和 处理 过 程 ， 在 将 thenable 对 象 转换 为 promise 对 象 的 时 候 ， 还 会 巧妙 的 利用 thenable 对 象 原来 具有 的 then Æ 
法 。 变 成 了 promise 对 象 的 话 ， 就 能 直接 使 用 then 或 者 catch, 比如 : 


var promise = Promise.resolve($.ajax('/json/comment.json'));// => promise 对 象 
promise.then(function(value){ 
console.log(value); 


H; 


需要 注意 的 是 :即使 一 个 对 象 具有 then 方法 ， 也 不 一 定 就 能 作为 ES6 Promises 对 象 使 用 。 上 比如 jQuery 的 pefeered object 的 
then 方 法 机 制 与 Promise 不 同 。 


其 实在 Promise 里 可 以 将 任意 个 方法 连 在 一 起 作为 一 个 方法 链 (method chain) ， 比 如 : 


aPromise.then(function taskA(value){ 

// task A 

}).then(function taskB(vaue){ 

// task B 

3).catch(function onRejected(error)( 
console.log(error); 


D 


Promise.reject 


Promise.reject(error) 是 和 Promise.resolve(value) 类 似 的 静态 方法 ， 是 new Promise() 方法 的 快捷 方式 。 


Promise.reject(new Error(" 出 错 了 ")); 

// 等 价 于 

new Promise(function(resolve,reject){ 
reject(new Error(" 出 错 了 ")); 

35 


Promise 的 同步 or 异步 调用 


先 看 下 面 这 段 代 码 : 


function onReady(fn) { 
var readyState - document.readyState; 


if (readyState === 'interactive' || readyState === 'complete') { 
fn(); 
) else ( 


window.addEventListener('DOMContentLoaded', fn); 
h 
J 
onReady(function () { 
console.log('DOM fully loaded and parsed'); 


3) 


console.log('--Starting--'); 


这 段 代码 会 根据 执行 时 DOM 是 否 已 经 装载 完毕 来 决定 是 对 回调 范 数 进 行 同步 调用 还 是 异步 调用 。 这 实际 上 会 让 我 们 的 代码 是 
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同步 还 是 一 部 产生 混淆 ， 所 以 为 了 解决 这 个 问题 ， 我 们 应 该 统一 使 用 异步 调用 的 方式 : 


function onReady(fn) { 
var readyState = document.readyState; 


if (readyState === 'interactive' || readyState === 'complete') { 
setTimeout(fn, 0); 
) else ( 


window.addEventListener('DOMContentLoaded', fn); 


J 
J 
onReady(function () { 

console.log('DOM fully loaded and parsed'); 
5 


console.log('--Starting--'); 


我 们 看 到 的 promise.then 也 属于 此 类 ， 为 了 避免 上 述 中 同时 使 用 同步 、 异 步调 用 可 能 引起 的 混乱 问题 ， 


E Promise 只 能 使 用 异步 调用 方式 ， 修 改 代码 如 下 : 


function onReadyPromise() { 
return new Promise(function (resolve, reject) { 
var readyState = document.readyState; 


if (readyState === 'interactive' || readyState === 'complete') { 
resolve(); 
) else { 


window.addEventListener('DOMContentLoaded', resolve); 


y 
35 
J 
onReadyPromise().then(function () { 
console.log('DOM fully loaded and parsed'); 
35 


console.log('--Starting--'); 


Promise£Zcatch 


链 式 上 的 catch 会 捕获 前 面 所 有 then 的 错误 情况 。 其 实 这 也 是 个 语法 糖 : 


var promise = Promise.reject(new Error("message")); 

promise.catch(function (error) ( 
console.error(error); 

35 

// 等 价 于 

var promise = Promise.reject(new Error("message")); 

promise.then(undefined, function (error) { 
console.error(error); 


}); 


Promise 在 规范 上 规 


提倡 使 用 catch 的 原因 还 有 一 个 就 是 : 使 用 promise.then(onFulfilled, onRejected) 的 话 , 在 onFulfilled 中 发 生 异 常 的 话 ， 在 


onRejected 中 是 捕获 不 到 这 个 异常 的 。 


然而 实际 上 不 管 是 then 还 是 catch 方法 调用 ， 都 返回 了 一 个 新 的 promise 对 象 。 


Promise chain 


通过 then 方法 ， 我 们 可 以 将 代码 写成 方法 链 的 形式 。 比 如 : 


function taskA() { 
console.log("Task A"); 


} 


Promise 实 战 


87 





前 端 工程 病 手 册 





function taskB() { 
console.log("Task B"); 


} 
function onRejected(error) { 
console.log("Catch Error: A or B", error); 


J 
function finalTask() { 
console.log("Final Task"); 


var promise - Promise.resolve(); 
promise 
.then(taskA) 
.then(taskB) 
.catch(onRejected) 
.then(finalTask); 


chain 的 时 候 ， 如 何 传递 参数 ? 答案 非常 简单 ， 那 就 是 在 Task A 中 return 的 返回 值 ， 会 在 Task B 执行 时 传 给 它 。 因 为 return 
的 值 会 由 Promise.resolve(return 的 返回 值 ); 进行 相应 的 包装 义理 。 


多 个 Promise 对 象 完成 后 统一 义理 


通过 回调 方式 来 进行 多 个 异步 调用 


ARA: 


function getURLCallback(URL, callback) { 
var req - new XMLHttpRequest(); 
req.open('GET', URL, true); 
req.onload = function () { 


if (req.status === 200) { 
callback(null, req.responseText); 
) else { 


callback(new Error(req.statusText), req.response); 


YN 
req.onerror = function () ( 
callback(new Error(req.statusText)); 
YN 
reg.send(); 
} 
// «A» 对 JSON 数 据 进行 安全 的 解析 
function jsonParse(callback, error, value) { 
if (error) ( 
callback(error, value); 
) else ( 
try ( 
var result - JSON.parse(value); 
callback(null, result); 
) catch (e) 1 
callback(e, value); 


ii 
H 
// «2» 发 送 XHR 请 求 
var request = ( 
comment: function getComment(callback) { 
return getURLCallback('http://azu.github.io/promises-book/json/comment.;json', jsonParse.bind(null, callback 
hh 
people: function getPeople(callback) ( 
return getURLCallback('http://azu.github.io/promises-book/json/people.json', jsonParse.bind(null, callback; 
j 
N 
// «3» 启动 多 个 XHR 请 求 ， 当 所 有 请 求 返回 时 调用 callback 
function allRequest(requests, callback, results) { 
if (requests.length === 0) { 
return callback(null, results); 




















} 
var req = requests.shift(); 
req(function (error, value) { 
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if (error) $ 
callback(error, value); 
j else { 
results.push(value); 
allRequest(requests, callback, results); 
Hi 
35 
} 
function main(callback) { 
allRequest([request.comment, request.people], callback, []); 


h 
// 运行 的 例子 
main(function(error, results){ 
if(error){ 
return console.error(error); 


y 


console.log(results); 


3) 





e 需要 显示 进行 异常 义理 
e 为 了 不 让 府 套 层次 太 深 ， 需 要 一 个 对 request 进 行 处 理 的 函数 
e Sj en yg ERA 


使 用 Promise#then 同 时 处 理 多 个 异步 请 求 


function getURL(URL) { 
return new Promise(function (resolve, reject) { 
var req - new XMLHttpRequest(); 
req.open('GET', URL, true); 
req.onload = function () { 


if (req.status --- 200) ( 
resolve(req.responseText); 
} else { 


reject(new Error(req.statusText)); 


H 
u 
req.onerror = function () { 
reject(new Error(req.statusText)); 
3n 
req.send(); 
35 
} 
var request = ( 
comment: function getComment() { 
return getURL('http://azu.github.io/promises-book/json/comment.json').then(JSON.parse); 
M 
people: function getPeople() { 
return getURL('http://azu.github.io/promises-book/json/people.json').then(JSON.parse); 
dr 
N 
function main() { 
function recordValue(results, value) ( 
results.push(value); 
return results; 
J 
// [] 用 来 保存 初始 化 的 值 
var pushValue = recordValue.bind(null, []); 
return request.comment().then(pushValue).then(request.people).then(pushValue); 




















y 

// 运行 的 例子 

main().then(function (value) { 
console.log(value); 

3).catch(function(error)£( 
console.error(error); 


D 
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这 种 方法 也 不 是 我 们 期 望 的 ， 和 上 面 的 回调 画 数 风格 相 上 比 : 


e 可 以 直接 使 用 JSON.parse KZ 
e Kt main() 返回 promise 对 象 
e 错误 处 理 的 地 方 直接 对 返回 的 promise 对 象 进 行 处 理 


Promise.all 


Promise.all 接收 一 个 promise 对 象 的 数组 作为 参数 ， 当 这 个 数组 里 的 所 有 promise 对 象 全 部 变 为 resolve 或 reject 状 态 的 时 
候 ， 它 才 会 去 调用 .then 方法 。 比 如 : 


function getURL(URL) { 
return new Promise(function (resolve, reject) ( 
var req - new XMLHttpRequest(); 
req.open('GET', URL, true); 
req.onload = function () { 


if (req.status === 200) ( 
resolve(req.responseText); 
) else ( 


reject(new Error(req.statusText)); 
} 
Nu 
req.onerror = function () { 
reject(new Error(req.statusText)); 
Nu 
req.send(); 
35 
J 
var request = { 
comment: function getComment() { 
return getURL('http://azu.github.io/promises-book/json/comment.json').then(JSON.parse); 
Lh 
people: function getPeople() { 
return getURL('http://azu.github.io/promises-book/json/people.json').then(JSON.parse); 
} 
N 
function main() { 
return Promise.all([request.comment(), request.people()]); 
J 
// 运行 示例 
main().then(function (value) { 
console.log(value); 
3).catch(function(error)£( 
console.log(error); 


3 


这 样 的 优点 是 : 


e main 中 的 处 理 流程 非常 清晰 
e Promise.all 接收 promise 对 象 组 成 的 数组 作为 参数 


Promise 数 组 是 同时 开始 执行 的 ，then 调 用 参数 的 结果 之 中 的 results 顺 序 和 传递 的 数组 的 顺序 一 致 。 并 且 调 用 then 的 时 间 由 最 
后 一 个 完成 的 异步 操作 决定 。 


Promise.race 
它 的 使 用 方法 和 Promise.all 一 样 ， 接 收 一 个 promise 对 象 数 组 为 参数 。 与 a 的 区 别 就 是 : race 只 要 有 一 个 promise 对 象 进入 


FulFilled 或 者 Rejected 状态 的 话 ， 就 会 继续 进行 后 面 的 处 理 。 但 是 Promise 中 的 数组 也 还 是 会 继续 执行 。 但 是 then 只 接受 
第 一 个 完成 的 Promise 返 回 对 象 。 


A VAN 


£z 
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e JavaScript 异 步 编程 的 Promise 模 式 


Promise 实 战 
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MID 
Async 控 制 异步 流程 
Async 是 一 个 流程 控制 工具 包 ， 提 供 了 直接 而 强大 的 异步 功能 。 基 于 Javascript 为 Node.js 设 计 ， 同 时 也 可 以 直接 在 浏览 器 中 使 


用 。 
参考 资料 


e Async 
e Nodejs 异 步 流程 控制 Async 
e async demo: 带 中 文 注释 的 demo. 


Async 控 制 异步 流程 
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EventProxy 控 制 异步 流程 


EventProxy 是 一 个 通过 控制 事件 触发 顺序 来 控制 业务 流程 的 工具 。 


资料 


参考 次 
e eventproxy: An implementation of task/event based asynchronous pattern. 


EventProxy 控 制 异步 流程 
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Biy LEJ 


FJ 


JSDeferred 控 制 异步 流程 


参考 资 
-人 
ez pl 


料 


e JSDeferred 


JSDeferred 控 


制 异步 流 程 
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JavaScript 正 则 表达 式 


正则 表达 式 ， 乍 一 看 以 为 是 很 高 升 的 未 西 ， 但 是 对 于 程序 员 而 让 ， 它 真 的 应 该 算是 一 个 基础 知识 。 我 们 在 很 多 场合 下 都 需要 


使 用 到 它 ， 这 个 技术 又 是 一 个 比较 通用 的 未 西 ， 所 以 对 于 程序 员 而 


e 维基 百科 : 正则 表达 式 

e MDN: Regular Expressions 

e stackoverflow: regular expression info 

e Hacker News: Learn regular expressions in about 55 minutes 
e 正则 表达 式 30 分 钟 入 门 

e Learn regular expressions in about 55 minutes 
e regex one: 学 习 资 料 

e JavaScript Regular Expression Cheatsheet 

e 在 线 验 证 工具 ， 中 文 版 

e Regex 101: 在 线 验证 学 习 

e Regexper: 可 视 化 正则 表达 式 

e regex-tuesday: some challenges 

e Regex Crossword: play to learn Regex 
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基本 语法 
既然 作为 前 端 ， 那 就 拿 JavaScript 语 言 作为 例子 ， 记 录 一 下 学 习 内 容 。 


创建 方式 


e 字面 值 形式 : rtrim = /ab+c/g 
e. new 形 式 创 建 : var replaceRegexp = RegExp("ab*c", 'g'); 


这 两 种 创建 方式 的 区 别 是 ， 如 果 你 的 正则 表达 式 是 可 以 确定 的 ， 那 么 使 用 字面 值 形式 性 能 会 更 好 ， 但 是 如 果 你 的 正则 是 动态 
创建 的 ， 那 么 只 能 选择 构造 画 数 的 形式 了 。 而 在 具体 的 使 用 上 ， 二 者 是 没有 差别 的 。 


书 与 规则 


字面 值 形式 的 ， 记 得 表达 式 前 后 加 上 / 符号 。 


e V: 转 义 字符 ， 普 通 字 符 前 面 加 上 、 可 以 代表 特殊 意义 的 字符 。 特 殊 意 义 的 字符 ， 也 可 以 将 其 转换 为 普通 字符 。 当 使 用 
new RegExp("pattern") 方 法 的 时 候 不 要 忘记 将 \ 它 自己 进行 转 义 ， 因 为 \ 在 字符 串 里 面 也 是 一 个 转 义 字符 。 

e 和 ^ :匹配 输入 的 开始 。 匹 配 行 首 的 字符 。 

e “* :匹配 前 一 个 字符 0 次 或 者 是 多 次 。 

e + :匹配 前 面 一 个 字符 1 次 或 者 多 次 ， 和 {1,} 有 相同 的 效果 。 

e ? : 匹配 前 面 一 个 字符 0 次 或 者 1 次 ， 和 {0,1} 有 相同 的 效果 。 

e . : (小 数 点 ) 匹配 任何 除了 新 一 行 开头 字符 的 任何 单个 字符 。 

e (x): 匹配 X' 并 且 记 住 匹配 项 。 这 个 被 叫做 捕获 括号 。 可 以 通过 数组 得 到 匹配 的 对 象 。 

e (?:x) : 匹配 Xx' 但 是 不 记 住 匹 配 项 。 这 种 被 叫做 非 捕 获 括号 。 

e x(?=y) : 匹配 X' 仅 仅 当 'x' 后 面 跟着 'y'. 这 种 叫做 正 向 肯定 查找 。 

e x(?!y) : 匹配 X' 仅 仅 当 'x' 后 面 不 跟着 'y', 这 个 叫做 正 向 否定 查找 。 

e xly : 匹配 Xx' 或 者 'y'。 

e mi n 是 一 个 正 整数 ， 匹 配 了 前 面 一 个 字符 刚好 发 生 了 n 次 。 

e {n,m} :n 和 m 都 是 正 整 数 。 匹 配 前 面 的 字符 至 少 n 次 ， 最 多 m 次 。 如 果 n 或 者 m 的 值 是 0， 这 个 值 被 忽略 。 

e [xyz]: 一 个 字符 集合 。 匹 配方 括号 的 中 任意 字符 。 你 可 以 使 用 破 折 号 C) 来 指定 一 个 字符 范围 。 对 于 点 (.) MES 

(*) 这 样 的 特殊 符号 在 一 个 字符 集中 没有 特殊 的 意义 。 他 们 不 必 进 行 转 意 ， 不 过 转 意 也 是 起 作用 的 。 

e [^yz] : 一 个 反 向 字符 集 。 也 就 是 说 ， 它 匹配 任何 没有 包含 在 方 括号 中 的 字符 。 你 可 以 使 用 破 折 号 C) 来 指定 一 个 字 
符 范围 。 任 何 普 通 字 符 在 这 里 都 是 起 作用 的 。 

e [\b] :匹配 一 个 退 格 (U+0008)。 (不 要 和 \b 混 淆 了 。) 

e b: 匹配 一 个 词 的 边界 。 一 个 词 的 边界 就 是 一 个 词 不 被 另外 一 个 词 跟随 的 位 置 或 者 不 是 另 一 个 词汇 字符 前 边 的 位 置 。 注 
意 ， 一 个 匹配 的 词 的 边界 并 不 包含 在 匹配 的 内 容 中 。 换 句 话 说 ， 一 个 匹配 的 词 的 边界 的 内 容 的 长 度 是 0。 CREDE 
淆 了 ) 

e B: 匹配 一 个 非 单词 边界 。 他 匹配 一 个 前 后 字符 都 是 相同 类 型 的 位 置 : 都 是 单词 或 者 都 不 是 单词 。 一 个 字符 串 的 开始 和 
结尾 都 被 认为 是 非 单词 。 

e vox : 当 X 是 处 于 A 到 Z 之 间 的 字符 的 时 候 ， 匹 配 字符 串 中 的 一 个 控制 符 。 

e xd :匹配 一 个 数字 。 等 价 于 [0-9]。 

e \D :匹配 一 个 非 数 字 字 符 。 等 价 于 "9。 

e Nf :匹配 一 个 换 页 符 (U+000C)。 

e ANn :匹配 一 个 换行 符 (U+000A)。 

e vr :匹配 一 个 回 车 符 (U+000D)。 

e s: 匹配 一 个 空白 字符 ， 包 括 空 格 、 制 表 符 、 换 页 符 和 换行 符 。 

e s: 匹配 一 个 非 空白 字符 。 

o \t :匹配 一 个 水 平 制 表 符 (U+0009)。 

e wv : 匹配 一 个 垂直 制 表 符 (U+000B)。 


基本 语法 96 





前 端 工程 病 手 册 





e wi 匹配 一 个 单字 字符 (字母 、 数 字 或 者 下 划 线 ) 。 等 价 于 [A-Za-z0-9_]。 

e w: 匹配 一 个 非 单字 字符 。 等 价 于 ^A2az09 。 

e \n : 当 n 是 一 个 正 整数 ， 一 个 返回 引用 到 最 后 一 个 与 有 n 插 入 的 正 值 表达 式 (counting left parentheses) 匹 配 的 副 字 符 
串 。 

e \9 :匹配 NULL (U+0000) 字符 ， 不 要 在 这 后 面 跟 其 它 小 数 ， 因 为 \0 是 一 个 八进制 转 义 序列 。 

e whh : 匹配 带 有 两 位 小 数 代 码 (hh) 的 字符 。 

e  \uhhhh : 匹配 带 有 四 位 小 数 代码 (hh) 的 字符 。 


如 果 需 要 记 住 匹配 项 ， 需 要 使 用 括号 ， 这 样 才能 通过 数组 查找 到 。 


使 用 括号 


/chapter (\d+)\.\d*/ 这 部 分 中 的 (\d+) 部 分 是 会 被 记忆 的 ， 是 可 以 作为 一 个 字符 串 被 使 用 。 


可 使 用 的 方法 


在 RegExp 对 象 的 方法 中 有 : 


e exec: A RegExp method that executes a search for a match in a string. It returns an array of information. 
e test: A RegExp method that tests for a match in a string. It returns true or false. 


在 String 对 象 的 方法 中 有 : 


e match:A String method that executes a search for a match in a string. It returns an array of information or null on a 
mismatch. 

e replace:A String method that executes a search for a match in a string, and replaces the matched substring with a 
replacement substring. 

e search: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global Objects/String/match. 

e split: A String method that uses a regular expression or a fixed string to break a string into an array of substrings. 


exec 


这 是 RegExp 对 象 的 一 个 方法 ， 传 人 一 个 字符 串 ， 默 认 返 回 一 个 数组 ， 包 含 匹配 结果 ， 以 及 匹配 的 一 些 信 息 。 如 果 是 带 记 忆 信 
息 的 ， 数 组 的 长 度 会 变化 。 没 有 匹配 的 时 候 ， 返 回 null. 


test 


这 是 RegExp 对 象 的 一 个 方法 ， 传 入 一 个 字符 串 ， 默 认 返 回 true 或 者 false. 


X VAN 
参考 $t 料 


e MDN: Regular Expressions 

e stackoverflow: regular expression info 

e 正则 表达 式 30 分 钟 入 门 

e Learn regular expressions in about 55 minutes 
e regex one: 学 习 资 料 

e JavaScript Regular Expression Cheatsheet 

e 在 线 验证 工具 ， 中 文 版 

e Regex 101: 在 线 验证 学 习 

e Regexper: 可 视 化 正则 表达 式 

e regex-tuesday: some challenges 
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e Regex Crossword: play to learn Regex 
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实用 案例 


Je MS 
2 $r 料 


e 实战 正则 表达 式 





实用 案例 
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jQuery 相关 


100 





前 端 工程 病 手 册 





jQuery 事件 注册 和 取消 


jQuery 毕竟 是 和 DOM 打 交道 最 常用 的 库 ， 它 为 我 们 提供 了 很 好 的 兼容 性 保障 。 关 于 jQuery 提供 的 事件 相关 方法 ， 可 以 参 
zE:event-handler-attachment, 


事件 注册 

bind 

这 是 1.x 早 起 版 本 的 一 种 绑 定 方式 ， 你 看 名 称 就 比较 直接 。 主 要 适用 于 直接 绑 定 到 已 经 存在 的 对 象 上 ， 但 是 在 1.7 版 本 之 后 ， 
推荐 使 用 的 绑 定 方式 是 on 方法 ， 原 因 很 简单 ， 支 持 事件 委 托 嘛 (| guess)! 并 且 jQuery 自 身 代 码 中 ， 所 有 和 与 事件 注册 相关 的 操 
作 使 用 的 都 是 on 方法 。 

还 有 一 点 需要 提 到 的 ， 就 是 通过 bind 绑 定 的 事件 ， 可 以 通过 unbind 取 消 。 

delegate 

用 作 事 件 代理 代理 。 

live 

也 是 用 作 事 件 代 理 ， 区 别 就 是 绑 定 的 选择 器 每 次 都 会 更 新 。 已 经 弃 用 了 ! 

on 


上 面 的 三 个 方法 : bind, delegate, live 就 是 早期 jQuery 事件 义理 的 主要 方法 ， 但 是 on 出 现 之 后 ， 都 被 替换 掉 了 。 也 就 是 
说 ， 凡 事 和 事件 打交道 的 时 候 ， 都 要 使 用 on ， 这 才 是 老大 ! 


one 

用 法 和 on 类 似 ， 触 发 一 次 后 自动 取消 。 
off 

取消 事件 绑 定 。 

trigger 


手动 触发 事 件 。 
命名 空间 


使 用 了 很 久 jQuery 的 事件 绑 定 ， 才 在 同事 那里 学 到 可 以 添加 命名 空间 这 个 概念 。 充 分 表明 了 文档 的 重要 性 ， 因 为 这 个 是 文档 
里 提 及 到 的 ， 并 且 就 在 前 几 段 1 Po! 


首先 jQuery 绑 定 的 事件 名 称 可 以 是 任意 String， 因 为 可 以 通过 trigger 触发 ， 对 于 不 同 的 事件 名 称 ， 可 以 通过 添加 命名 空间 的 
形式 进行 区 分 ， 比 如 click 事件 ， 我 们 可 以 添加 click.namespace ， 也 可 以 是 click.name.space ， 多 个 命名 空间 并 行 。 其 实 主 
要 原因 就 是 jQuery 将 每 一 个 绑 定 事件 对 应 的 处 理 函 数 都 存储 起 来 了 ， 添 加 命名 空间 ， 也 就 是 对 相同 事件 上 的 不 同 或 多 处 事件 
ANB ES UE TT CA. 
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这 样 在 trigger 的 时 候 ， 就 可 以 进行 区 分 了 ， 从 而 不 触发 其 他 绑 定 的 处 理 画 数 。 


事件 代理 


jQuery 中 事件 流 是 冒 泡 的 ， 也 就 是 从 触发 的 那个 元 素 (event.target) 开 始 ， 向 document 冒 泡 。 我 们 可 以 通 
过 event.stopPorpagation() 停止 冒 泡 。 


事件 代理 的 一 大 好 处 就 是 可 以 绑 定 一 个 元 素 上 ， 检 测 子 元 素 触发 ， 而 不 需要 绑 定 在 N 多 个 相同 的 子 元 素 上 ， 这 样 效率 上 会 好 
很 多 。 


事件 对 象 


Event Object，jQuery 的 事件 对 象 是 遵守 W3C 标 准 的 。 关 于 事件 对 象 的 详细 内 容 ， 参 见 : Event Object. 


传递 data 


jquery 的 绑 定 事件 ， 一 般 都 会 有 一 个 [data] 参数 ， 可 以 传递 字符 串 orjson 对 象 ， 然 后 通过 事件 对 象 event .data 获取 。 

Ab 、 
性 能 问题 
事件 影响 我 们 程序 效率 的 情况 ， 不 是 那些 click 这 样 触发 不 频繁 的 事件 ， 而 是 mousemove, scroll 这 样 一 分 钟 内 会 触发 多 次 的 
事件 ， 我 们 要 在 这 些 处 理 画 数 中 ， 尽 量 减 小 工作 量 ,缓存 需要 查询 的 元 素 , 并 且 尽 量 限 制 触发 频率 。 (通过 setTimeout) 
影响 性 能 的 另外 一 大 原因 就 是 事件 代理 了 ， 虽 然 它 好 用 ， 但 是 如 果 我 们 把 所 有 事件 都 绑 定 在 document 上 ， 那 么 每 次 都 是 经 历 
一 个 大 的 通 历 过 程 ， 这 是 消耗 性 能 的 一 个 问题 。 解 决 的 办 法 就 是 尽量 将 几 个 可 以 使 用 事件 代理 的 处 理 ， 找 一 个 最 近 的 对 象 进 
TIAE. 


事件 代理 的 选择 器 也 是 一 个 讲究 ， 使 用 "umyForm", "a.external", "button" 这 类 会 比较 快 ， 这 和 css 的 选择 器 道理 类 似 。 





jQuery 事件 注册 和 取消 102 





前 端 工程 病 手 册 





获取 元 素 在 DOM 中 的 顺序 
jQuery 事件 中 的 this 和 标准 事件 处 理 中 的 this 是 一 致 的 ， 都 是 指向 绑 定 事件 的 DOM 元 素 。 


事件 中 的 元 素 


e 事件 中 的 this 指 针 , 指 向 的 都 是 绑 定 事件 的 元 素 。 


e event.currentTarget, 和 this 一 致 


e event.delegateTarget: 如 果 使 用 了 事件 委托 ， 那 就 是 对 于 的 绑 定 元 素 。 否 则 和 currentTarget 一 致 


e event.target: 真正 触发 的 元 素 。 


搜索 元 素 


ed() 方 法 

这 个 主要 是 过 滤 选 取 的 元 素 ， 比 如 $('1i').eq(n) o 
index() 方 法 

索引 值 是 从 0 记 数 的 ， 返 回 元 素 在 其 同 级 别 DOM 元 素 中 的 位 置 。 


e 如 果 不 传递 参数 ， 返 回 的 是 当前 元 素 的 索引 值 。 
e 如 果 传 递 一 个 DOM 元 素 进去 ， 返 回 的 是 在 当前 选择 器 中 的 索引 。 


get() 方 法 

传 入 索引 值 ， 获 取 对 于 的 DOM 元 素 。 
通 历 元 素 

parent() 方 法 


e 不 传递 参数 ， 返 回 直 接 的 父 级 元 素 。 


e 传 入 选择 器 ， 在 返回 的 父 级 元 素 中 过 滤 符 合 的 元 素 ， 返 回 数组 ， 可 以 通过 判断 数组 长 度 判 断 是 否 存在 # 


parents() 方 法 


BERAIR 


和 parent 方 法 类 似 ， 不 过 返回 的 不 是 直接 父 级 元 素 ， 而 是 所 有 的 祖先 元 素 。 还 有 一 点 不 同 的 是 , parent 通 历 的 顶点 是 


document: 


$( "html" ).parent(); // [document] 
$( "html" ).parents(); // [] 


parentsUntil() 75 ;& 
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Deferred 对 象 


jQuery 提供 一 个 静态 方法 Deferred ， 返 回 一 个 可 供 链 式 调 回 调 函 数 队列 。 为 的 是 解决 异步 编程 问题 ， 遵 循 Common 
Promise/A 规 范 。jQuery 在 1.5 版 本 中 引入 了 这 个 特性 ， 并 为 其 重 写 了 Ajax 模块 ， 可 见 其 重要 性 。 


它 解 决 了 如 何 处 理 耗 时 操作 的 问题 ， 对 那些 操作 提供 了 更 好 的 控制 ， 以 及 统一 的 编程 接口 。 


deferred 对 象 的 方法 


. $.Deferred() 生成 一 个 deferred 对 象 

. deferred.done() 指定 操作 成 功 时 的 回调 画 数 

. deferred.fail() 指定 操作 失败 时 的 回调 画 数 

. deferred.promise() 没有 参数 时 ， 返 回 一 个 新 的 deferred 对 象 ， 该 对 象 的 运行 状态 无 法 被 改变 ; 接受 参数 时 ， 作 用 为 在 参 
数 对 象 上 部 署 deferred 接 口 。 

. deferred.resolve() 手动 改变 deferred 对 象 的 运行 状态 为 "已 完成 ”， 从 而 立即 触发 done() 方 法 。 

6. deferred.reject() 这 个 方法 与 deferred.resolve() 正 好 相反 ， 调 用 后 将 deferred 对 象 的 运行 状态 变 为 "已 失败 "， 从 而 立即 触 
发 fail() 方 法 。 

7. $.when() 为 多 个 操作 指定 回调 画 数 

8. deferred.then(): 把 done 和 fail 结 合 写 在 一 起 了 ， 传 递 两 个 回调 画 数 即 可 。 

9. deferred.always(): 这 个 方法 也 是 用 来 指定 回调 函数 的 ， 它 的 作用 是 ， 不 管 调用 的 是 deferred.resolve() 还 是 

deferred.reject()， 最 后 总 是 执行 。 


e MSN 
2 Tr 料 


e jQuery.Deferred 
e jQuery 的 deferred 对 象 详解 
e 读 jQuery 之 二 十 (Deferred 对 象 ) 


AUNP 


ol 
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jQuery 代码 技巧 


一 些 优化 性 能 的 技巧 


e 缓存 变量 

e 避免 全 局 变量 

e 使 用 匈牙利 命名 法 

e 使 用 Var 链 〈 单 Var 模式 ) 

e 请 使 用 On 方法 注册 事件 

e 合并 同一 个 对 象 上 的 多 次 操作 ， 比 如 修改 祥 式 

e 链 式 操作 

e 维持 代码 的 可 读 性 

e 选择 短路 求 值 ，&& 和 || 

e 选择 捷径 

e 繁重 的 操作 中 分 离 元 素 : 如 果 你 打算 对 DOM 元 素 做 大 量 操作 (连续 设置 多 个 属性 或 css 样 式 ) ， 建 议 首先 分 离 元 素 然 后 在 
添加 。 

e 熟 记 技巧 , 比如 : $.data('#id', key, value) Lb $('#id').data(key, value) 高 效 

e 使 用 子 查询 缓存 的 父 元 素 : DOM 通 万 是 一 项 昂贵 的 操作 。 典 型 做 法 是 缓存 父 元 素 并 在 选择 子 元 素 时 重用 这 些 缓存 元 素 。 

e 避免 通用 选择 符 : 将 通用 选择 符 放 到 后 代 选 择 符 中 ， 性 能 非常 糟糕 。 

e 避免 隐 式 通用 选择 符 : 通用 选择 符 有 时 是 隐 式 的 ， 不 容易 发 现 。 

e 优化 选择 符 : Id 选择 符 应 该 是 唯一 的 ， 所 以 没有 必要 添加 额外 的 选择 符 。 


Je MS 
参考 $r 料 


e 编写 更 好 的 jQuery 代码 的 建议 
e 50 个 jQuery 代码 段 帮 你 成 为 更 好 的 JavaScript 开 发 者 
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jQuery 源码 分 析 


X MN 
参考 $r 料 


e 逐 行 分 析 jQuery 源 码 的 奥秘 
e 专题 : jQuery 系列 源码 分 析 
e 慕 课 网 :jQuery 源码 解析 


jQuery 源码 分 析 
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理解 架构 
Write less, do more. 


代码 结构 


(function( global, factory ) { 


if ( typeof module === "object" && typeof module.exports === "object" ) { 
// For CommonJS and CommonJS-like environments where a proper ^"window' 
// is present, execute the factory and get jQuery. 
// For environments that do not have a "window! with a "document 
// (such as Node.js), expose a factory as module.exports. 
// This accentuates the need for the creation of a real ‘window . 
// e.g. var jQuery = require("jquery") (window); 
// See ticket 414549 for more info. 
module.exports - global.document ? 
factory( global, true ) : 
function( w ) { 
if ( !w.document ) { 
throw new Error( "jQuery requires a window with a document" ); 
J 
return factory( w ); 
Py 
} else { 
factory( global ); 
J 


// Pass this if window is not defined yet 
}(typeof window !== "undefined" ? window : this, function( window, noGlobal ) { 
var jQuery - function( selector, context ) ( 
return new jQuery.fn.init( selector, context ); 
N 
jQuery.fn = jQuery.prototype = (); 
// 核心 方法 
// 回调 系统 
// 异步 队列 
// 数据 缓存 
// 队列 操作 
// 选择 器 
// 属性 操作 
// T$ RORIS 
// 文档 处 理 
// 样式 操作 
// 属性 操作 
// 事件 体系 
// AJAX 交 互 
// 动画 引擎 
return jQuery; 


























2); 


模块 依赖 


jQuery 一 共 13 个 模块 ， 从 2.1 版 开始 jQuery 支持 通过 AMD 模 块 划分 ，jQuery 在 最 开始 发 布 的 1.0 版 本 是 很 简单 的 ， 只 有 CSS 选 
择 符 、 事 件 处 理 和 AJAX 交 互 3 大 块 。 


jQuery 也 可 理解 分 为 五 大 块 ， 选 择 器 、DOM 操 作 、 事 件 、AJAX 与 动画 ， 那 么 为 什么 有 13 个 模块 ? 因为 jQuery 的 设计 中 最 喜 
欢 的 做 的 一 件 事 ， 就 是 抽出 共同 的 特性 使 之 "模块 化 "， 当 然 也 是 更 贴近 S.O.L.1.D 五 大 原则 的 "单一 职责 SRP" 了， 遵守 单一 职责 
的 好 处 是 可 以 让 我 们 很 容易 地 来 维护 这 个 对 象 ， 比 如 ， 当 一 个 对 象 封装 了 很 多 职责 的 时 候 ， 一 旦 一 个 职责 需要 修改 ， 势 必 会 
影响 该 对 象 的 其 它 职责 代码 。 通 过 解 耦 可 以 让 每 个 职责 更 加 有 弹性 地 变化 。 


模块 列表 如 图 : 
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立即 调用 表达 式 


任何 库 与 框架 设计 的 第 一 个 要 点 就 是 解决 命名 空间 与 变量 污染 的 问题 。jQuery 就 是 利用 了 JavaScript 函 数 作用 域 的 特性 ， 采 
用 立即 调用 表达 式 包裹 了 自身 的 方法 来 解决 这 个 问题 。 


比如 : 


(function(window, undefined) { 

var jQuery = function() {} 

"T 

window.jQuery - window.$ - jQuery; 
3)(window); 


从 上 面 的 代码 可 看 出 ， 自 动 初始 化 这 个 函数 ， 让 其 只 构建 一 次 。 这 种 写法 的 优势 : 


e window 和 undefined 都 是 为 了 减少 变量 查找 所 经 过 的 scope 作 用 域 。 当 window 通 过 传递 给 闭 包 内 部 之 后 ， 在 闭 包 内 部 使 
用 它 的 时 候 ， 可 以 把 它 当 成 一 个 局 部 变量 ， 显 然 比 原先 在 window scope 下 查找 的 时 候 要 快 一 些 。 

e undefined 也 是 同 祥 的 道理 ， 其 实 这 个 undefined 并 不 是 JavaScript 数 据 类 型 的 undefined， 而 是 一 个 普 普 通通 的 变量 名 。 
只 是 因为 没 给 它 传递 值 ， 它 的 值 就 是 undefined，undefined 并 不 是 JavaScript 的 保留 字 。 


Q: 为 什么 传递 undefined? 
Javascript 中 的 undefined 并 不 是 作为 关键 字 ， 因 此 可 以 允许 用 户 对 其 赋值 。 


大 部 分 浏览 器 都 是 不 能 被 修改 的 ,但 是 IE8 存 在 这 个 问题 , 比如 : 


var undefined = 'xxx' 
;(function(window) { 

alert(undefined);//IE8 'xxx' 
}) (window) 


jQuery 的 类 数组 对 象 结构 
很 多 人 迷惑 的 jQuery 为 什么 能 像 数 组 一 样 操作 ， 通 过 对 象 get 方 法 或 者 直接 通过 下 标 0 索引 就 能 转 成 DOM 对 象 。 


比如 jQuery 的 入 口 都 是 统一 的 $, 通过 传递 参数 的 不 同 ， 实 现 了 9 种 方法 的 重 载 : 


jQuery([selector, [context]]) 
jQuery(element) 
jQuery(elementArray) 

jQuery (object) 

jQuery(jQuery object) 
jQuery(html, [ownerDocument]) 
jQuery(html, [attributes]) 
jQuery() 

jQuery(callback) 





9 种 用 法 整体 来 说 可 以 分 三 大 块 : 选择 器 、dom 的 处 理 、dom 加 载 。 运 用 了 设计 模式 里 面 的 工厂 模式 。 





所 以 为 了 更 方便 这 些 操作 ， 让 节点 与 实例 对 象 通过 一 个 桥梁 给 关联 起 来 ，jQuery 内 部 就 采用 了 一 种 叫 * 类 数组 对 象 "的 方式 作 
为 存储 结构 ， 所 以 我 们 即 可 以 像 对 象 一 样 义理 jQuery 操作 ， 也 能 像 数组 一 样 可 以 使 用 push、pop、shift、unshift、sort、 
each、map 等 类 数组 的 方法 操作 jQuery 对 象 了 。 


抽象 的 表示 创建 可 用 数组 下 标 操作 的 对 象 : 


baas 
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var aQuery = function(selector) ( 
// 强 制 为 对 象 
if (!(this instanceof aQuery)) { 
return new aQuery(selector); 


J 


var elem = document.getElementById(/[^4].*/.exec(selector)[9]); 


this.length - 1; 

this[0] = elem; 

this.context - document; 

this.selector - selector; 

this.get = function(num) { 
return this[num]; 


return this; 


jQuery 的 无 new 构 建 原理 


函数 aQuery() 内 部 首先 保证 了 必须 是 通过 new 操 作 符 构 建 。 这 样 就 能 保证 当前 构建 的 是 一 个 带 有 this 的 实例 对 象 ， 既 然 是 对 象 
我 们 可 以 把 所 有 的 属性 与 方法 作为 对 象 的 key 与 value 的 方式 给 映射 到 this 上 ， 所 以 如 上 结构 就 可 以 模拟 出 jQuery 的 这 样 的 操作 
了 ， 即 可 通过 索引 取 值 ， 也 可 以 链 式 方法 取 值 ， 但 是 这 样 的 结构 是 有 很 大 的 缺陷 的 ， 每 次 调用 ajQuery 方 法 等 于 是 创建 了 一 个 
新 的 实例 ， 那 么 类 似 get 方 法 就 要 在 每 一 个 实例 上 重新 创建 一 青 ， 性 能 就 大 打折 扣 ， 所 以 jQuery 在 结构 上 的 优化 不 仅仅 只 是 我 
们 看 到 的 ， 除 了 实现 类 数组 结构 、 方 法 的 原型 共享 ， 而 且 还 实现 方法 的 静态 与 实例 的 共存 ， 这 是 我 们 之 后 将 会 重点 分 析 的 。 





jQuery 中 ready 与 load 事 件 


jQuery 中 存在 三 种 文档 加 载 的 方法 : 


$(document ) .ready(function() { 
JL SENE) 

3) 

//document ready 简写 

$(function() 4 


17. S ERR deren 
3) 
$(document).load(function() { 
JA S ANGERS 
3) 


DOM 文 档 加 载 的 步骤 


e 解析 HTML 结 构 。 

e 加 载 外 部 脚本 和 样式 表 文 件 。 
e 解析 并 执行 脚本 代码 。 

e 构造 HTML DOM 模 型 。//ready 
e 加 载 图 片 等 外 部 文件 。 

e 页 面 加 载 完毕 。//load 


jQuery 多 库 共 存 义理 


多 库 共存 换 句 话说 可 以 叫 无 冲突 处 理 。jQuery 给 出 了 解决 方案 : 


jQuery.noConflict(); 

// 使 用 jQuery 
jQuery("aaron").show(); 

// 使 用 其 他 库 的 $() 
$("aaron").style.display = 'block'; 





























"ua 
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109 





前 端 工程 病 手 册 





这 个 画 数 必须 在 你 导入 jQuery 文件 之 后 ， 并 且 在 导入 另 一 个 导致 冲突 的 库 之 前 使 用 。 当 然 也 应 当 在 其 他 冲突 的 库 被 使 用 之 
前 ， 除 非 jQuery 是 最 后 一 个 导入 的 。 


~ MN 
参考 Tr 料 


e jQuery 2.0.3 源码 分 析 core - 整体 架构 


理解 架构 
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GSAP 


GSAP 相 关 


b 
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弟 见 问题 


TweenMax 当 seek 的 时 候 ， 不 执行 onComplete 


描 


xh : 在 使 用 TimelineMax 或 者 TweenMax 添 加 过 渡 的 时 候 ， 如 果 添 加 的 内 容 包含 了 oncomplete , 


的 。 因 为 不 在 最 外 层 的 oncomplete o 


3% 


见 问 题 


seek 的 时 候 是 不 会 执行 
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跨 域 问题 


跨 域 问题 
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同 源 策 上 略 
如 果 两 个 页 面 拥有 相同 的 协议 (protocol) ， 端 口 (如 果 指定 ) ， 和 主机 ， 那 么 这 两 个 页 面 就 属于 同一 个 源 (origin) 。 


在 以 前 ， 前 端 和 后 端 混杂 在 一 起 ， 比如 JavaScript 直 接 调用 同系 统 里 面 的 一 个 Httphandler， 就 不 存在 跨 域 的 问题 ， 但 是 随 着 
现代 的 这 种 多 种 客户 端的 流行 ， 比 如 一 个 应 用 通常 会 有 Web 端 ，App 端 ， 以 及 WebApp 端 ， 各 种 客户 端 通常 会 使 用 同一 套 的 

后 台 处 理 逻 辑 ， 即 APl， 前 后 端 分 离 的 开发 策略 流行 起 来 ， 前 端 只 关注 展现 ， 通 常 使 用 JavaScript， 后 端 处 理 逻 辑 和 数据 通常 
使 用 WebService 来 提供 json 数 据 。 一 般 的 前 端 页 面 和 后 端的 WebService API 通 常 部 署 在 不 同 的 服务 器 或 者 域名 上 。 这 样 ， 通 
过 ajax 请 求 WebService 的 时 候 ， 就 会 出 现 同 源 策略 的 问题 。 


解决 方案 


e JSONP (JSON with padding) 
e CORS (Cross-origin resource sharing ) 





T X MSN 
-人 不 、 
e 考 pt 


e JavaScript 的 同 源 策略 
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ervice 解 决 方 案 


料 


e 浅 谈 跨 域 以 WebService 对 跨 域 的 支持 


WebService 解 决 方案 


116 





前 端 工程 病 手 册 





JSONP 


HTML 的 «script» 元 素 是 一 个 例外 。 利 用 «script» 元 素 的 这 个 开放 策略 ， 网 页 可 以 得 到 从 其 他 来 源 动态 产生 的 JSON 资 
料 ， 而 这 种 使 用 模式 就 是 所 谓 的 JSONP。 用 JSONP 抓 到 的 资料 并 不 是 JSON， 而 是 任意 的 JavaScript, FH JavaScript 直译 
器 执行 而 不 是 用 JSON 解析 器 解析 。 


问题 现象 





1、 一 个 众所周知 的 问题 ，Ajax 直 接 请 求 普通 文件 存在 跨 域 无 权限 访问 的 问题 ， 博 管 你 是 静态 页 面 、 动 态 网 页 、web 服 务 、 
WCF， 只 要 是 跨 域 请 求 ， 一 律 不 准 ; 





2、 不 过 我 们 又 发 现 ，Web 页 面 上 调用 js 文件 时 则 不 受 是 否 跨 域 的 影响 (不 仅 如 此 ， 我 们 还 发 现 凡是 拥有 "src" 这 个 属性 的 标签 
都 拥有 跨 域 的 能 力 ， 比如 <script>, <img>, <iframe> ) 


3、 于 是 可 以 判断 ， 当 前 阶段 如 果 想 通过 纯 web 端 (ActiveX 控 件 、 服 务 端 代理 、 属 于 未 来 的 HTML5 之 Websocket 等 方式 不 
算 ) 跨 域 访问 数据 就 只 有 一 种 可 能 ， 那 就 是 在 远程 服务 器 上 设法 把 数据 装 进 js 格式 的 文件 里 ， 供 客户 端 调用 和 进一步 处 理 ; 


4、 恰 巧 我 们 已 经 知道 有 一 种 叫做 JSON 的 纯 字符 数据 格式 可 以 简洁 的 描述 复杂 数据 ， 更 妙 的 是 JSON 还 被 js 原生 支持 ， 所 以 
在 客户 端 几 乎 可 以 随心 所 欲 的 处 理 这 种 格式 的 数据 ; 


5、 这 样子 解决 方案 就 呼之欲出 了 ，web 客 户 端 通过 与 调用 脚本 一 模 一 样 的 方式 ， 来 调用 跨 域 服务 器 上 动态 生成 的 js 格式 文件 
(一 般 以 JSON 为 后 级 ) ， 显 而 易 见 ， 服 务 器 之 所 以 要 动态 生成 JSON 文 件 ， 目 的 就 在 于 把 客户 端 需要 的 数据 装 入 进去 。 


6、 客 户 端 在 对 JSON 文 件 调 用 成 功 之 后 ， 也 就 获得 了 自己 所 需 的 数据 ， 剩 下 的 就 是 按照 自己 需求 进行 处 理 和 展现 了 ， 这 种 获 
取 远 程 数 据 的 方式 看 起 来 非常 像 AJAX， 但 其 实 并 不 一 样 。 


7、 为 了 便于 客户 端 使 用 数据 ， 逐 渐 形 成 了 一 种 非 正 式 传输 协议 ， 人 们 把 它 称 作 ]SONP， 该 协议 的 一 个 要 点 就 是 允许 用 户 传 


递 一 个 callback 参 数 给 服务 端 ， 然 后 服务 端 返回 数据 时 会 业 这 个 callback 参 数 作为 函数 名 来 包 襄 住 ]JSON 数 据 ， 这 样 客户 端 就 
可 以 随意 定制 自己 的 函数 来 自动 处 理 返 回 数据 了 。 


原理 分 析 


同 源 策略 下 ， 某 个 服务 器 是 无 法 获取 到 服务 器 以 外 的 数据 ， 但 是 html 里 面 的 img,iframe 和 script 等 标签 是 个 例外 ， 这 些 标签 可 
以 通过 src 属 性 请 求 到 其 他 服务 器 上 的 数据 。 而 J]SONP 就 是 通过 script 节 点 src 调 用 跨 域 的 请 求 。 


当 我 们 向 服务 器 提交 一 个 JSONP 的 请 求 时 ,我 们 给 服务 传 了 一 个 特殊 的 参数 ,告诉 服务 端 要 对 结果 特殊 义理 一 下 。 这 样 服务 端 
返回 的 数据 就 会 进行 一 点 包装 ， 客 户 端 就 可 以 处 理 。 


举 个 例子 ， 服 务 端 和 客户 端 约定 要 传 一 个 名 为 callback 的 参数 来 使 用 J]SONP 功 能 。 上 比如 请 求 的 参数 如 下 : 
http://www.example.net/sample.aspx?callback=mycallback 


如 果 没 有 后 面 的 callback 参 数 ， 即 不 使 用 JSONP 的 模式 ， 该 服务 的 返回 结果 可 能 是 一 个 单纯 的 json 字 符 串 ， 比 如 : { foo 
'bar' 3 。 但 是 如 果 使 用 JSONP 模 式 ， 那 么 返回 的 是 一 个 函数 调用 : mycallback({ foo : 'bar' }) ， 这 样 我 们 在 代码 之 中 ， 定 
义 一 个 名 为 mycallback 的 回调 函数 ， 就 可 以 解决 跨 域 问题 了 。 


Jo MS 
参考 $t 料 


e 维基 百科 : JSONP 
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测试 相关 


调试 与 测试 
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Blackbox 


Blackbox 人 允许 屏 敬 指定 的 JS 文 件 ， 这 样 调试 的 时 候 就 会 绕 过 它们 了 。 


屏蔽 文件 后 后 会 ATUA 么 样 


e RRA (被 屏蔽 的 文件 ) 里 抛 出 异常 时 不 会 暂停 ( 当 设 置 为 Pause on exceptions 时 ) 
e 调试 时 Stepping into/out/over 都 会 忽略 库 代码 

e 事件 断 点 也 会 忽略 库 代 码 

e 库 代 码 里 设置 的 任何 断 点 也 不 会 起 作用 

e 最 终 的 结果 就 是 只 会 调试 应 用 代码 而 忽略 第 三 方 代码 (配置 了 Blackbox 的 代码 ) 。 


t F 


开发 人 员工 具 的 Settings 面 板 
打开 开发 人 员工 具 的 配置 面板 ， 在 Sources 下 点 击 Manage framework blackboxing, 有 如 下 集中 方式 配置 : 
e 输入 文件 名 称 
e 用 正则 表达 式 匹 配 
o 包含 特定 名 称 的 文件 ， 上 比如 /backbone.js$ 
o 特定 类 型 的 文件 ， 上 比如 .min.js$ 
e 输入 整个 文件 夹 ， 比 如 bower_components 


另外 ， 需 要 暂时 不 屏蔽 某 个 规则 时 ， 可 以 将 Behavior 改 为 Disable。 或 者 也 可 以 直接 删除 (光标 移 到 某 行 规则 后 会 有 个 X) 。 
Blackbox content scripts 是 指 屏 殴 Chrome 插 件 注 入 页 面 的 脚本 . 


在 Sources 面 板 上 右键 某 个 文件 


在 Sources 面 板 目 录 里 ， 或 者 编辑 器 里 ， 右 键 点 击 “Blackbox Script"， 可 以 将 屏蔽 该 文件 ， 同 时 也 会 增加 到 Setting 面 板 中 的 匹 
配 规则 里 。 


e MSN 
参考 Tr 料 


e 调试 时 屏蔽 JavaScript 库 代码 -Chrome DevTools Blackbox 功 能 介绍 


Blackbox 120 








Bim LR 98 d 


FJ 


Mocha 测 试 框架 


x ~ko 
rA 
参考 页 


e Mocha 
e chai 


料 


Mocha 测 试 框架 
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前 端 自动 化 
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自动 化 流程 


前 端的 开发 不 同 于 后 端 ， 涉 及 的 东西 有 很 多 ， 后 台 通 常 的 流程 就 是 :创建 -> 编码 -> 测试 。 而 前 端的 制作 ， 包 含 了 切 图 -> 项 目 构 


建 -> 编译 (less,coffeescripbj-> 兼 容 性 -> 测试 -> 发 布 等 等 多 道 流程 。 


音 规 的 前 端 流程 


e 搭建 基础 的 项 目 骨架 。 包 含 创 建 模版 (html jade, ham) 、 脚 本 (javascript, coffeescript) 、 样 式 (css, less, 


sass, stylus) 文件 
e 启动 本 地 服务 器 ， 上 比如 MAMP 
e 切 图 + 编码 页 面 ， 搭 建 界面 
e 保存 ， 刷 新 浏览 器 查看 预览 ， 并 且 进 行 调整 
e 如 果 偶 遇 需 要 编译 的 文件 ， 还 要 使 用 工具 对 其 (jade、coffeescript、less、sass...) 编译 
e 编码 交互 和 事件 
e 保存 ， 刷 新 浏览 器 ， 手 动 触发 检查 
e 执行 测试 用 例 
e 代码 检测 , 优化 
e 移 除 调试 代码 
e 静态 资源 合并 与 优化 , javascript 和 css 文 件 的 合并 与 压缩 
e 打包 上 传 到 服务 器 
e 部 署 测 试 环境 
e 灰 度 发 布 现 网 


缺点 : 在 开发 的 中 后 期 ， 代 码 会 庞大 ， 维 扩 起 来 比较 费力 ， 修 改 和 新 增 都 担心 对 之 前 的 会 有 影响 ， 且 还 担心 线 上 的 版 本 有 问 


题 ， 需 要 重新 部 署 。 


工具 化 


以 上 的 流程 中 ， 其 实 有 些 内 容 ， 比 如 切 图 ， 刷 新 ， 测 试 ， 部 署 都 可 以 通过 工具 化 的 方式 进行 优化 。 


大 平台 公司 对 工具 化 的 坚持 是 一 致 的 : 凡是 被 不 断 重复 的 过 程 ， 将 其 工具 化 ， 绑 定 到 自动 化 流程 之 中 。 技 术 产品 也 需要 Dont 


make me think 的 方式 来 推广 最 佳 实践 。 总 而 言 之 : 依靠 工具 ， 而 不 是 经 验 。 


nodejs 的 出 现 ， 不 敢 说 改变 后 端的 开发 很 多 ， 但 是 对 前 端的 工具 化 确实 进步 了 很 多 。 
自动 化 
有 了 工具 之 后 ， 就 是 要 想 办 法 利用 工具 达到 流程 的 自动 化 。 


Yeoman 


Yeoman 是 一 款 现代 Web 应 用 的 脚手架 工具 ， 也 是 一 个 工作 流 。 它 包含 了 yo, grunt, bower 三 个 工具 。 


yo 


脚手架 工具 ， 帮 助 构建 项 目 骨架 。 


bower 


自动 化 流程 
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Bower 是 用 于 Web 前 端 开发 的 包 管理 器 。 它 运行 在 Git 之 上 (因此 必须 先 安装 Git) ， 上 默认 情况 下 会 去 Github 下 载 ， 并 存放 
在 bower_components 目录 下 。 


grunt 


自动 化 工具 ， 通 过 package.json 来 安装 依赖 的 差距 ， 使 用 gruntfile.js 文件 来 编写 要 执行 的 任务 。 


gulp 

grunt 使 用 多 了 就 会 发 现任 务 编写 过 程 的 麻烦 ， 后 来 居 上 的 gulp 是 一 个 很 好 的 替代 ， 我 已 经 在 使 用 ， 并 且 离 不 开 了 |! 
e 停 不 下 来 的 前 端 ， 自 动 化 流程 

e 前 端 自动 化 工作 流 简介 


e 前 端 自动 化 构建 和 发 布 系统 的 设计 (一 ) 
e 前 端 自动 化 构建 和 发 布 系统 的 设计 (二 ) 


自动 化 流程 
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yeoman 


Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. 


如 何 开始 


学 习 一 个 新 东西 ， 最 直接 的 方式 就 是 去 官方 网 站 找 向 导 ， 比 如 Getting Start. 


创建 自己 的 generator 


官方 指导 ,主要 是 对 模板 文件 创建 的 过 程 进行 了 解 。 详 细 的 使 用 查看 : API 


index.js 结 构 解析 


'use strict'; 

// 引入 使 用 的 模块 ，yosay 是 命令 行 里 显示 文字 的 插件 ，chalk 是 增强 命令 行 下 颜色 显示 。 
var yeoman = require('yeoman-generator'); 

var yosay - require('yosay'); 

var chalk - require('chalk'); 




















// 导出 模块 ， 使 得 yo _ xxx 能够 运行 
module.exports = yeoman.generators.Base.extend({ 
// 默认 会 添加 的 构造 画 数 
constructor: function () { 
yeoman.generators.Base.apply(this, arguments); 
^ 
// 初始 化 执行 的 内 容 ， 一 般 读 取 配 置 文件 
initializing: function () { 
this.pkg - require('../package.json'); 
// 提示 信息 相关 内 容 ， 比 如 询问 用 户 是 否 使 用 某 些 模块 
prompting: function () { 
u 














// 拷贝 文件 ， 创 建 真正 的 项 目 ， 这 里 面 提 三 个 需要 注意 的 画 数 
// template: 拷贝 文件 ， 同 时 会 蔡 换 里 面 的 配置 信息 

// copy: 只 负责 拷贝 ， 但 是 好 像 也 能 替换 里 面 的 配置 信息 
// write: 修改 文件 内 容 

writing: ( 
































j 
» 


yeoman 125 


tt 





前 端 工程 病 手 册 





yo 126 





前 端 工程 病 手 册 








bower 

bower 是 twitter 推 出 的 一 套 前 端 组 件 管理 工具 。 一 般 用 来 安装 
的 辅助 工具 。 

.bowerrc 


这 个 文件 可 以 指定 bower 安 装 的 位 置 ， 默 认 是 : 


1 
"directory": "src/bower components" 
} 
一 般 会 修改 为 : 
1 
"directory": "src/scripts/vendor" 
} 
AA 
boweráp 


uL Lua 


出 师 


所 需 模块 ， 


npm 安 装 的 一 般 是 node 环 境 下 的 组 件 ， 或 者 开发 


如 果 存 在 package.json 文件 ， 那 么 bower install 就 会 按照 这 个 文件 的 依赖 进行 安装 ， 如 果 自 行 安 装 的 话 ， 最 好 加 上 -- 


saveDev ， 会 自动 添加 到 package.json 文件 中 。 


bower 
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Gulp 


前 端 自动 化 流程 管理 。 在 JavaScript 的 世界 里 ，Grunt.js 是 基于 Node.js 的 自动 化 任务 运行 器 。2013 年 02 月 18 日 ，Grunt v0.4.0 
发 布 。Fractal 公 司 积极 参与 了 数 个 流行 Node.js 模 块 的 开发 ， 它 去 年 发 布 了 一 个 新 的 构建 系统 Gulp， 希 望 能 够 取 其 精华 ， 并 取 
代 Grunt， 成 为 最 流行 的 JavaScript 任 务 运行 器 。 


Gulp 和 Grunt 的 异同 点 


e 易于 使 用 : 采用 代码 优 于 配置 策略 ，Gulp 让 简单 的 事情 继续 简单 ， 复 条 的 任务 变 得 可 管理 。 

e 高 效 : 通过 利用 Node.js 强 大 的 流 ， 不 需要 往 磁 盘 写 中 间 文 件 ， 可 以 更 快 地 完成 构建 。 

e 高 质量 : Gulp 严 格 的 插件 指导 方针 ， 确 保 插 件 简单 并 且 按 你 期 望 的 方式 工作 。 

e 易于 学 习 : 通过 把 API 降 到 最 少 ， 你 能 在 很 短 的 时 间 内 学 会 Gulp。 构 建 工作 就 像 你 设想 的 一 样 : 是 一 系列 流 管道 。 


Gulp 特 点 


e 易 用 : Gulp 相 比 Grunt 更 简洁 ， 而 且 遵 循 代码 优 于 配置 策略 ， 维 护 Gulp 更 像 是 写 代 码 。 

e 高 效 : Gulp 相 比 Grunt 更 有 设计 感 ， 核 心 设计 基于 Unix 流 的 概念 ， 通 过 管道 连接 ， 不 需要 写 中 间 文 件 。 

e 高 质量 : Gulp 的 每 个 插件 只 完成 一 个 功能 ， 这 也 是 Unix 的 设计 原则 之 一 ， 各 个 功能 通过 流 进行 整合 并 完成 复杂 的 任务 。 
例如 : Grunt 的 imagemin 插 件 不 仅 压 缩 图 片 ， 同 时 还 包括 缓存 功能 。 他 表示 ， 在 Gulp 中 ， 缓 存 是 另 一 个 插件 ， 可 以 被 别 
的 插件 使 用 ， 这 样 就 促进 了 插件 的 可 重用 性 。 目 前 官方 列 出 的 有 673 个 插件 。 





Gulp 示 例 


var gulp = require('gulp'); 


var jshint - require('gulp-jshint'); 
var concat - require('gulp-concat'); 
var rename - require('gulp-rename'); 
var uglify - require('gulp-uglify'); 
77 Cint JS 


gulp.task('lint', function() { 

return gulp.src('src/*.js') 
.pipe(jshint()) 
.pipe(jshint.reporter('default')); 

IDE 


// Concat & Minify JS 
gulp.task('minify', function(){ 
return gulp.src('src/*.js') 
.pipe(concat('all.js')) 
.pipe(gulp.dest('dist')) 
.pipe(rename('all.min.js')) 
-pipe(uglify()) 
.pipe(gulp.dest('dist')); 
35 
// Watch Our Files 
gulp.task('watch', function() { 
gulp.watch('src/*.js', ['lint', 'minify']); 
35 


// Default 
gulp.task('default', ['lint', 'minify', 'watch']); 


会 v alas 
(CN ^ 
参考 页 T 
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gulp 





e gulp 

e gulp fiction: 可 视 化 配置 gulp 工 作 流 程 。 

e 前 端 工 程 的 构建 工具 对 比 Gulp vs Grunt 
e gulp-cheatsheet: A cheatsheet for gulp.js 
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gulp 插 件 选 择 


使 用 的 插件 


无 依赖 的 


del: Delete files/folders using globs. 

opn: A better node-open. Opens stuff like websites, files, executables. Cross-platform. 
psi: PageSpeed Insights for Node. 

wiredep: Wire Bower dependencies to your source code. 

browser-sync: Live CSS Reload & Browser Syncing. 

require-dir: Helper to require() directories. 

run-sequence: Run a series of dependent gulp tasks in order. 


gulp 辅 助 


gulp: The streaming build system. 

gulp-if: Conditionally run a task. 

gulp-cache: A cache proxy task for Gulp. 
gulp-changed: Only pass through changed files. 
gulp-filter: Filter files in a vinyl stream. 

gulp-replace: A string replace plugin for gulp. 
gulp-flatten: remove or replace relative path for files. 


gulp-useref: Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets. 


gulp-load-plugins: Automatically load any gulp plugins in your package.json. 


gulp plugins for css 


gulp-autoprefixer: gulp-autoprefixer. 
gulp-uncss: Remove unused CSS selectors. 
gulp-csso: Minify CSS with CSSO. 
gulp-less: Less for Gulp. 


gulp plugins for scripts 


gulp-jshint: JSHint plugin for gulp. 


e jshint-stylish: Stylish reporter for JSHint. 


gulp plugins for compress 


gulp-concat: Concatenates files. 

gulp-imagemin: Minify PNG, JPEG, GIF and SVG images. 
gulp-minify-html: Minify html with minimize. 
gulp-minify-css: Minify css with clean-css. 

gulp-uglify: Minify files with UglifyJS. 

gulp-size: Display the size of your project. 


测试 相关 


karma 自动 测试 插件 


gulp 插 件 选择 
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e karma-Chrome-launcher: 调用 Chrome 进 行 测试 


e gulp-livereload 
e gulp-autowatch 


generator-gulp-webapp 


"devDependencies": { 


"apache-server-configs": "^2.7.1", 
'tconnect i: A39 
"connect-livereload": "^9.4.0", 


"del": "^9.1.0", 
"gulp": "^3.6.0", 


"gulp-autoprefixer": "^9.0.7", 


"gulp-cache": "^9.2.2", 
"gulp-csso": "^0.2.6", 
"gulp-filter": "^9.5.9", 


"gulp-flatten": "^0.0.2", 


"gulp-if": "^1.2.1", 


"gulp-imagemin": "^0.6.0", 


"gulp-jshint": "^1.5.3", 


"gulp-livereload": "^2.0.0", 

"gulp-load-plugins": "^0.5.0",«9; if (includeSass) ( if (includeBootstrap) ( 9?» 
"gulp-replace": "^0.3.0",«96 ) 96» 

"gulp-ruby-sass": "^90.5.0", 

"gulp-plumber": "^0.6.3",«96 ) 95» 


"gulp-size": "^0.4.0", 
"gulp-uglify": "^9.3.0", 
"gulp-useref": "^90.6.0", 


"jshint-stylish": "^0.2.0",«9 if (includeBootstrap && includeSass) ( *» 
"lazypipe": "^0.2.1",«96 ) MW 


"main-bower-files": "^i1.0.1", 
"opn": "^0.1.1", 
"serve-index": "^1.1.4", 
"serve-static": "^1.4.0", 


"wiredep": "^1.4.3" 


web-starter-kit-master 


"devDependencies": { 


"apache-server-configs": "^2.7.1", 
"browser-sync": "^1.3.0", 


"del": "^9.1.2", 
"gulp": "^3.8.5", 


"gulp-autoprefixer": "^0.0.8", 


"gulp-cache": "^9.2.2", 


"gulp-changed": "^1.9.0", 


4"gülpzcssoss "ng, 29%, 


"gulp-flatten": "^0.0.2", 


"gulp-if": "^1.2.1", 


"gulp-imagemin": "^1.0.0", 


"gulp-jshint": "^1.6.3", 


"gulp-load-plugins": "^90.5.3", 
"gulp-minify-html": "^9.1.4" 
"gulp-replace": "^0.4.0", 
"gulp-ruby-sass": "^90.7.1", 


"gulp-size": "^1.0.0", 
"gulp-uglify": "^9.3.1", 
"gulp-uncss": "^90.4.5", 
"gulp-useref": "^90.6.0", 


"jshint-stylish": "^9.4.0", 


"opn": "^1.0.0", 
"psi": "^9.1.2', 


gulp 插 件 选择 
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"require-dir": "^0.1.0", 
"run-sequence": "^90.3.6" 


} 
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yeoman 参 考 案 例 
generator-generator 是 用 来 生成 模板 的 模板 。 在 Yeoman Discover 
Yeoman 官 方 


e Yeoman on Github 
e generator-webapp 
e generator-gulp-webapp 


非 官方 的 


e web-starter-kit 


yeoman 人 参考 案例 
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什么 是 SAP 


"A single-page application (SPA), is a web application or web site that fits on a single web page with the goal of providing a 
more fluid user experience akin to a desktop application." 


T y 料 
-人 EM 
参考 资 


e 构建 单 页 Web 应 用 


e. 移动 Web 单 页 应 用 开发 实践 页 面 结构 化 
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单 页 面 SEO 解 决 方案 


单 页 应 用 实际 是 把 视图 (View) 泻 染 从 Server 交 给 浏览 器 ，Server 只 提供 JSON 格 式 数 据 ， 视 图 和 内 容 都 是 通过 本 地 
JavaScript 来 组 织 和 泻 染 。 而 搜索 搜索 引擎 抓 取 的 内 容 ， 需 要 有 完整 的 HTML 和 内 容 ， 单 页 应 用 架构 的 站 点 ， 并 不 能 很 好 的 支 
持 搜索 。 


路 由 与 状态 的 管理 


传统 的 页 面 型 产品 是 不 存在 这 个 问题 的 ， 因 为 它 就 是 以 页 面 为 单位 的 ， 也 有 的 时 候 ， 服 务 端 路 由 处 理 了 这 一 切 。 但 是 在 单 页 
应 用 中 ， 这 成 为 了 问题 ， 因 为 我 们 只 有 一 个 页 面 ， 界 面 上 的 各 种 功能 区 块 是 动态 生成 的 。 所 以 我 们 要 通过 对 路 由 的 管理 ， 来 
实现 这 样 的 功能 。 


# 号 在 浏览 器 的 URL 中 是 一 个 锚 点 ， 在 当前 页 改变 # 号 的 参数 ， 页 面 会 跳 转 到 锚 点 所 在 的 位 置 ， 通 过 JavaScript 我 们 可 以 获取 


到 # 号 后 的 参数 , 改变 # 号 后 的 参数 ， 页 面 并 不 会 重 载 ， 于 是 大 多 数 的 单 页 架构 网 站 ， 都 在 URL 中 采用 # 号 来 作为 当前 视图 
的 URL 地 址 。 


prerender.io 
万 金 油 的 prerenderio. 也 就 是 根据 用 户 请 求 的 UA 类 型 ,普通 用 户 请 求 ， 按 照 正 常 流程 走 .而 蜘蛛 爬虫 之 类 的 用 户 请 求 ,采用 由 


prerender 执 行 页 面 js 后 生成 的 静态 页 面 发 送 给 爬虫 .从 而 达到 通用 的 单 页 面 seo. 不 关乎 于 框架 .( 注 意 游戏 直播 的 鼻祖 twitch 也 
是 采用 prerender.io 的 ) 


Je MS 
参考 资料 


e 单 页 应 用 SEO 浅 谈 


«^ 
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开发 无 框架 单 页 面 应 用 
参考 资料 


e 开发 无 框架 单 页 面 应 用 — 老 码 农 的 祖传 秘方 
e 项 目 示例 

e 别 再 用 JavaScript 框 架 了 

e Single page apps in depth 
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可 伸缩 的 同 构 Javascript 代 码 


先 花 点 时 间 想 想 你 是 有 多 人 么 频繁 地 听 到 “Model-View-Controller (MVC) 这 词 儿 ， 但 你 真正 明白 它 的 意义 吗 ? 在 较 高 层次 上 
而 言 ， 它 是 指 在 一 个 基于 图 像 系统 (〈 非 光 顶 化 图 像 ， 比 如 游戏 ) 以 展示 为 主 的 应 用 中 对 功能 的 关注 点 分 离 (separation of 
concerns) 。 进 一 步 看 ， 它 就 是 一 堆 表 示 不 同事 物 的 专 有 名 词 。 过 去 ， 许 多 开发 者 社区 都 创造 了 各 自 的 MVC 解 决 方案 ， 它 们 
都 能 很 好 地 应 对 流行 的 案例 ， 并 且 在 一 步 一 步 地 发 展 。 最 好 的 例子 就 是 Ruby 和 Python 社区 以 及 它们 基于 MVC 架 构 的 Rails 与 
Django 框架 。 


MVC 模 式 已 经 被 其 它 语言 所 接受 ， 比 如 Java，Ruby 和 Python。 但 是 对 于 Node.js 而 言 还 不 够 好 ， 其 中 的 一 个 原因 就 是 : 
Javascript 现 在 是 一 个 同 构 的 语言 了 。 同 构 的 意义 就 在 于 任何 一 段 代码 (当然 有 些 特殊 代码 例外 ) 都 能 同时 跑 在 客户 端 与 服务 
器 端 。 从 表面 上 讲 ， 这 个 看 似 无 害 的 特性 带 来 了 一 系列 当前 的 MVC 模 式 无 法 解决 的 挑战 。 在 这 篇 文章 中 我 们 会 探寻 目前 存在 
一 些 的 模式 ， 看 看 它们 都 是 怎样 实现 的 ， 同 时 关注 不 同 的 语言 及 环境 。 另 外 也 谈 谈 它 们 为 什么 对 于 真正 同 构 的 Javascript 而 言 
还 不 够 好 。 在 最 后 ， 我 们 会 了 解 一 种 全 新 的 模式 : Resource-View-Presenter。 


gE 


设计 模式 在 应 用 开发 中 至 关 重 要 。 它 们 概述 、 封 装 了 应 用 程序 及 其 环境 中 值得 关注 的 地 方 。 在 浏览 器 与 服务 器 之 间 这 些 关 注 
点 差异 很 大 : 

e 视图 是 短暂 的 (如 在 服务 器 上 ) 还 是 长 期 存在 的 〈 如 在 浏览 器 上 ) ? 

e 视图 是 否 能 跨 案例 或 场景 复 用 ? 

e 视图 是 否 该 被 应 用 特定 的 标签 标记 ? 

e 一 堆 堆 的 业务 逻辑 应 该 放 哪 里 ? (在 Model 中 还 是 在 Controller 中 ?) 

e 应 用 的 状态 应 该 如 何 持久 化 和 访问 ? 


Jo MSN 
参考 Tr 料 


e 可 伸缩 的 同 构 Javascript 代 码 


可 伸缩 的 同 构 Javascript 代 码 T 
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Ze X VAN 
D ^ 
参考 资 米 


e HTML5 History API + Ajax (Pjax) 实现 友好 的 局 部 刷新 
e pjax 是 如 何 工作 的 ? 
e ajax 与 HTML5 history pushState/replaceState 实 例 
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一 个 简单 粗暴 的 前 后 端 分 离 方 案 


e. 一 个 简单 粗暴 的 前 后 端 分 离 方 案 


一 个 简单 粗暴 的 前 后 端 分 离 方 案 
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User Interface 


Ul(User Interface), 用 户 界面 。 针 对 界面 美观 ， 操 作 逻 辑 以 及 人 机 交互 的 设计 。 


UI 


CEJ 
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关于 Retina 


Device Pixels( 设 各 像素 ) 


一 个 设备 像素 (或 者 称 为 物理 像素 ) 是 显示 器 上 最 小 的 物理 显示 单元 。 在 操作 系统 的 调度 下 ， 每 一 个 设备 像素 都 有 自己 的 颜 
色 值 和 亮度 值 。 


PPI(pixels per inch) 


屏幕 密度 指 的 是 单位 面积 里 物理 像素 的 数量 ， 通 常 以 PPI(pixels per inch) ži. RAA 29 ' BE BEER EE BA] Y zn 38 
(double-density displays) 创造 了 一 个 新 词 “Retina"， 声 称 在 正常 的 观看 距离 下 ， 人 眼 无 法 在 Retina 显 示 器 上 分 辨 出 单独 的 
像素 。 


与 设备 无 关 的 像素 (DIPs,device-independent pixels) 


CSS pixel 是 浏览 器 使 用 的 抽象 单位 ， 用 来 精确 的 、 统 一 的 绘制 网 页 内 容 。 通 常 ，CSS pixels 被 称 为 与 设备 无 关 的 像素 
(DIPs,device-independent pixels) 。 在 标准 密度 显示 器 (standard-density displays) 上 ，1 CSS pixel 对 应 一 个 物理 像素 。 


物理 像素 与 DIPs 的 比例 


物理 像素 与 CSS pixel 的 比率 可 以 通过 媒体 查询 的 device-pixel-ratio 来 检测 (device-pixel-ratio 兼 容 性 ) 。 也 可 以 通过 
javascript 的 window.devicePixelRatio 来 获取 该 比率 。 


Bitmap Pixels (位 图 像素 ) 


一 个 位 图 像素 是 栅 格 图 像 (也 就 是 位 图 ，png、jpg、gif 等 等 ) 最 小 的 数据 单元 。 每 一 个 位 图 像素 都 包含 着 该 如 何 显示 自己 的 
信息 ， 例 如 显示 位 置 、 颜 色 值 等 。 一 些 图 片 格式 还 包含 领 外 的 数据 ， 例 如 透明 度 。 


除了 自身 的 分 辩 率 外 ， 图 片 在 网 页 上 还 有 一 个 抽象 的 尺寸 ， 通 过 CSS pixels 来 定义 。 浏 览 器 在 泻 染 的 过 程 中 ， 会 根据 图 片 的 
CSS 高 度 和 宽度 来 压缩 或 是 拉 伸 图 片 。 


当 一 个 位 图 以 原 尺寸 展示 在 标准 密度 显示 器 上 时 ， 一 位 图 像素 对 应 一 个 物理 像素 ， 就 是 无 失真 显示 。 而 在 Retina 显 示 器 上 ， 


为 了 保证 同样 的 物理 尺寸 ， 需 要 用 四 倍 的 像素 来 展示 ， 但 由 于 单个 位 图 像素 已 经 无 法 再 进一步 分 割 ， 只 能 就 近 取 色 ， 导 致 图 
FERE. 


解决 方案 





HTML 
img 标 签 创建 的 时 候 ， 写 上 一 倍 大 小 的 宽 高 。 


CSS 





性 进行 控制 : 


Hl 
& 
di 


38 t background 


.image { 
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background-image: url(exampleQ2x.png); 
background-size: 200px 300px; 

/* 或 者 是 用 background-size: contain; */ 
height: 300px; 

width: 200px; 


JavaScript 


像素 密度 可 以 通过 javascript 的 window.devicePixelRatio 来 查询 (注意 : 不 是 所 有 浏览 器 都 支持 devicePixelRatio)。 一 旦 检测 到 


高 密度 显示 器 ， 你 就 可 以 用 高 质量 图 片 蔡 换 普通 图 片 : 


$(document ) .ready(function( ){ 
if (window.devicePixelRatio > 1) ( 
var lowresImages = $('img'); 
images.each(function(i) { 
var lowres - $(this).attr('src'); 
var highres - lowres.replace(".", "Q2x."); 
$(this).attr('src', highres); 
35 
i 
5 


SVG(Scalable Vector Graphics) 


由 于 位 图 本 身 固有 的 性 质 ， 不 可 能 无 限制 的 缩放 。 而 恰恰 这 是 矢量 图 的 优势 所 在 。 


Icon Fonts 


Twitter 的 bootstrap 使 Icon Fonts 更 加 的 流行 ， 该 技术 是 通过 @font-face 引 入 基于 icon 的 字体 来 代替 位 图 icon， 这 样 icon 就 不 


再 受 分 辨 率 影响 。 用 纯色 icon 代 替 字 母 的 web Fonts， 可 以 用 CSS 来 调整 样式 ， 就 像 网 页 里 其 它 文本 一 样 。 


Je MS 
参考 $r 料 


e 【 译 】 走 向 Retina Web 
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响应 式 图 片 


e MS 
2 $r 料 


e 实战 响应 式 图 片 


响应 式 图 片 
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响应 式 字 体 

px, em ,rem 这 是 web 开 发 中 常用 的 几 种 字体 单位 。 

天 于 字号 单位 

对 于 Webapp 上 文字 用 什么 单位 的 问题 ， 一 直 以 来 都 是 让 我 们 csser 头 阁 的 问题 ， 公 说 公有 理 ， 婆 说 婆 有 理 。 有 人 说 px 好 ， 有 
人 说 em 自 适 应 ， 有 的 说 百分比 牛 带 ，rem 文 字 出 来 就 跟风 说 目前 最 好 的 就 是 rem 单 位 。 不 管 是 什么 说 ， 我 们 还 是 要 实地 的 腾 


= 


px 


px 是 指 相对 于 自身 的 字体 大 小 的 单位 。 





px 像素 单位 是 针对 电脑 屏幕 来 说 的 一 个 单位 ， 对 于 桌面 上 来 说 ， 衡 量 屏幕 尺寸 的 就 是 分 状 率 了 ，1920*1280 的 分 状 率 屏幕 ， 
横向 就 是 1920 像 素 ， 纵 向 1280 个 像素 点 ( 除 高 清 屏幕 外 ) ， 那 我 们 设置 一 个 字体 样式 font-size:12px 计算 得 出 来 的 应 该 是 相 
对 于 电脑 屏幕 分 辩 率 的 12 个 单位 长 度 ， 所 以 有 时 候 我 们 会 陷入 一 个 误区 : px 像素 单位 是 一 个 绝对 长 度 单位 ， 但 是 其 实 它 也 是 
一 个 相对 单位 长 度 ， 它 相对 它 的 显示 设备 分 辩 率 。 

em 

em (font size of the element) 是 指 相 对 于 父 元 素 的 字体 大 小 的 单位 。 

1em 默 认为 16px。 

rem 


rem (font size of the root element). 是 指 相 对 于 根 元 素 的 字体 大 小 的 单位 。 简 单 的 说 它 就 是 一 个 相对 单位 。 


1rem 默 认为 10px。 


e web app 变革 之 rem 
e 关于 webapp 中 的 文字 单位 的 一 些 捣 腾 
e. 7 个 你 可 能 不 认识 的 CSS 单 位 
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中 文字 体 


我 们 在 日 常 需求 中 ， 经 常会 碰 到 视觉 设计 病 对 某 个 中 文字 体 效果 非常 坚持 的 情况 ， 因 为 页 面 是 否 高 大 上 ， 字 体 选择 是 很 重要 
的 一 个 因素 ， 选 择 合适 的 字体 可 以 让 页 面 更 优雅 。 


对 于 特殊 字体 ， 目 前 使 用 最 多 的 情况 还 是 转换 为 图 片 显示 。 


使 用 图 片 


e 制作 与 维护 成 本 很 高 。 切 图 繁琐 、 高 清 屏 适 配 策 琐 、 合 并 雪 怕 图 更 繁琐 ， 后 期 修改 更 加 繁琐 
e 用 户 体验 差 。 导 致 网 页 不 支持 选中 、 复 制 、 搜 索 、 翻 译 、 矢 量 缩放 ， 也 会 影响 视 障 用 户 使 用 读 屏 器 操作 网 页 
e 带 来 更 多 带宽 消耗 。 导 出 的 图 片 体积 随 着 文本 面积 增加 ， 且 字形 无 法 重复 利用 ， 这 消耗 着 大 量 的 服务 器 资源 


WebFont 


WebFont 技 术 提 供 了 在 网 页 使 用 特殊 字体 的 可 能 ， 从 而 避免 用 图 片 的 方法 。 它 的 实现 方法 是 通过 CSS 的 @font-face 引 入 字 
体 。 很 多 互联 网 公司 已 经 率先 采用 了 这 种 方法 ， 上 比如 Apple 官 网 就 是 采用 了 自己 的 字体 。Google 也 推出 了 免费 的 WebFont 云 
托管 服务 ， 在 国外 网 站 自 定义 字体 得 到 很 好 的 应 用 。 


中 文 webFont 的 一 个 选择 是 Adobe 与 Google 所 领导 开发 的 开源 字体 一 一 思源 字体 。 





中 文 WebFont 的 困境 


e 中 文字 体 体 积 大 
e 浏览 器 支持 ,不 同 浏览 器 支持 的 字体 格式 不 同 ,主要 格式 有 四 种 : ttf, woff eot, svg 


e MN 
参考 Tr 料 


e 设计 炳 的 春天 : 中 文 WebFont 解 决 方案 Font-Spider( 字 蛛 ) 
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一 ) LL r3 
T2 zh Wm E AN 
在 移动 设 各 上 要 面临 与 生 俱 来 的 挑战 : 空间 有 限 ， 环 境 光 通常 比较 微弱 。 下 面 列 出 一 些 技巧 : 
BJJ ` 
留 足 空间 


与 普 静 观点 恰好 相反 ， 字 体 并 非 屏幕 上 弯 碗 曲 曲 的 线条 排列 ; 它 主要 在 于 周围 和 相互 间 的 空间 。 字母 本 身 对 字体 的 影响 ， 和 与 
构成 它 的 空间 相 比 ， 要 小 得 多 。 


要 理解 这 一 点 ， 了 解 字体 从 何 而 来 很 有 帮助 : 字母 o (还 有 b、c、p 等 等 ) 中 间 的 圆 孔 被 称 作 " 凹 槽 "。 在 最 原始 的 印刷 机 上 ， 
铅字 由 金属 雕刻 而 成 ， 这 些 凹 槽 来 自 雕 刻 成 型 、 排 列 在 胡 中 的 金属 活字 。 第 一 个 字体 设计 病 所 义理 的 模具 ， 实 际 上 并 不 能 
于 印刷 。 字 母 本 身 对 字体 的 影响 ， 与 构成 它 的 空间 相 比 ， 要 小 得 多 。 谈 到 层次 时 ， 我 们 通常 指 的 是 h1 到 p， 有 时 候 还 会 到 
h6。 但 另外 还 有 一 种 层次 在 影响 着 行 或 段落 的 视觉 流 ， 这 是 特殊 的 层次 : 字母 间距 小 于 字 间 距 ， 字 间距 小 于 行 间距 ， 以 此 类 
推 。 要 在 移动 端 创造 最 佳 易 读 性 ， 尤 其 要 注意 这 些 特殊 层次 ， 这 些 格式 塔 式 的 词语 、 行 、 段 落 的 文字 组 合 ， 在 自然 光环 境 下 
同样 至 关 重 要 。 





J 
1J X 
行 宽 是 一 行文 字 的 长 度 。 或 者 确切 的 说 ， 是 一 行文 字 的 理想 长 度 ， 因 为 很 难 让 每 一 行 都 精确 吻合 。 

人 众所周知， 舒适 阅读 的 理想 行 宽 是 65 个 字符 左右 。 行 宽 产 生 的 物理 长 度 ， 取 决 于 字体 的 设计 、 字 间距 ( 见 下 文 ) 和 你 使 用 的 
具体 文字 。 本 文 开篇 的 65 个 字符 ( 译 者 注 : 此 处 请 参见 英文 原文 ) ， 用 PT Serif 字 体 是 26.875em 宽 ， 用 Open Sans 是 
28.4375em 宽 ， 用 Ubuntu 字 体 是 27.3125em 宽 。 如 果 再 加 入 和 斜体、 大 小 宇和 一 大 堆 其 他 字体 细节 ， 还 会 有 更 大 的 差异 。 ER 


面 端 浏览 器 中 ，65 个 字符 很 难 触及 边缘 ， 但 在 移动 设备 上 ，65 个 字符 (如果 至 少 大 到 看 得 清 ) 会 超出 浏览 器 的 边界 。 所 以 ， 
在 移动 设备 上 ， 你 必须 得 缩减 行 宽 。 


移动 端 并 没有 普通 认可 的 行 宽 标 准 。 不 过 传统 上 ， 报 纸 或 休 志 上 每 一 个 窒 列 都 会 趋向 于 39 个 字符 。 鉴 于 这 个 理想 行 宽 已 经 经 
历 了 数 个 世纪 的 考验 ， 它 在 移动 端 字体 上 也 运转 良好 。 


宽松 行距 、 紧 凑 行 距 





行距 是 行 之 间 的 空间 ， 行 距 太 紧 竣 ， 会 让 视线 难以 从 行 尾 打 视 到 下 一 行 首 。 行 距 太 宽松 ， 字 间距 会 开始 形成 队列 ， 产 生 了 我 
们 通常 意义 上 的 河流 ， 阻 断 了 行 的 视觉 流 。 





行距 的 标准 通常 是 1.4em， 但 以 我 的 经 验 ， 这 对 于 屏幕 来 说 太 紧 次 了 : 在 屏幕 上 表现 良好 的 字体 都 有 一 个 关键 特征 一 一 大 的 
叫 槽 ， 大 凹 槽 需要 更 大 一 些 的 行距 来 保持 空间 层次 。 





反 过 来 ， 更 短 的 行 宽 需要 更 小 的 行距 。 所 以 你 可 能 需要 将 桌面 端的 行距 设 得 宽松 点 ， 同 时 记得 将 移动 端的 设 证 得 紧凑 些 。 
> TIE H- ` 
找到 最 佳 状态 


所 有 字体 至 少 都 有 一 种 最 佳 状态 ， 在 屏幕 上 展现 最 佳 的 尺寸 ， 还 有 在 浏览 器 中 最 能 保持 字形 的 抗 锯齿 选项 。 





最 佳 状态 下 ， 多 数 笔画 通常 都 能 排列 在 像素 网 格 中 一 一 像素 字体 ， 如 果 你 还 记得 的 话 ， 那 些 字体 仅仅 在 字号 调整 到 最 佳 状态 
下 才 有 效 。 


将 字体 设 为 最 佳 状态 能 形成 更 强烈 的 对 比 。 为 移动 端 设计 时 ， 对 比 尤其 重要 ， 因 为 户外 的 强 光 可 能 分 散 注意 。 





你 会 发 现 ， 微 调 行距 会 使 每 行 脱离 完美 像素 匹配 。 我 觉得 ， 在 移动 设备 屏幕 上 ， 对 上 比 的 重要 性 胜 过 行距 。 所 以 如 果 你 不 得 不 
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在 行距 上 妥协 ， 来 保持 每 行 契 合 像素 网 格 ， 那 就 这 么 做 吧 。 
通常 设计 病 通 过 基线 网 格 来 排列 文字 。 但 在 移动 设备 上 ， 我 们 需要 使 用 x 高 度 来 代替 (x 高 度 顾名思义 ， 就 是 小 写字 母 x 的 高 


E) 。 从 易 读 性 研究 中 ， 我 们 知道 大 脑 识别 的 是 文字 顶部 ， 而 不 是 底部 。 所 以 要 成 就 更 加 平顺 的 视觉 流 ， 我 们 要 确保 字符 顶 
部 最 契合 像素 网 格 。 


不 要 忽视 起 伏 边 


起 伏 边 是 一 段 文字 的 边缘 。 你 读 的 多 数 内 容 是 居 左 对 齐 的 (至 少 对 于 拉丁 语系 而 言 ) ， 导 致 右边 治 参差 不 齐 。 


当 视 线 从 行 尾 跳 至 下 一 行 首 时 ， 大 脑 最 好 要 能 判断 出 下 一 次 跳跃 的 角度 和 距离 。 把 每 次 跳 路 都 想象 成 跑 过 跳板 ， 如 果 间 距 保 
持 一 致 ， 就 会 快 很 多 。 因 此 ， 文 字 左 侧 边 缘 应 该 是 平 的， 每 行 从 同一 个 地 方 开始 〈 对 于 从 右 至 左 的 语言 ， 恰 好 相反 ) 。 


因此 你 绝 不 应 该 将 两 三 行 以 上 的 文字 居中 对 齐 。 
通常 文字 会 设置 成 两 端 对 齐 ， 这 意味 着 每 行文 字 所 占 空 间 相 等 ， 所 以 两 侧 都 不 会 有 起 伏 边 。 我 怀疑 两 端 对 齐 的 流行 和 响应 式 


设计 有 关 ， 它 教 设计 羡 们 以 块 状 形态 思考 。 两 端 对 齐 的 文字 产生 的 留 白 不 统一 。 最 糟 的 情况 会 导致 一 行 中 只 有 几 个 字 ， 相 当 
不 协调 。 更 察 的 行 宽 会 加 重 两 端 对 齐 的 问题 ， 所 以 两 端 对 齐 的 文字 在 移动 端 是 难以 阅读 的 。 


减少 反差 




















增强 文字 与 背景 对 比 的 同时 ， 我 们 也 要 减少 不 同 层 次 文字 间 的 反差 。 
在 移动 端 ， 实 际 可 见 的 文字 更 少 ， 所 以 反差 被 放大 了 。 


其 原因 是 我 们 的 大 脑 基 于 环境 来 判断 重要 性 。 在 桌面 端 ， 标 题 可 能 是 正文 字号 的 两 倍 甚至 三 倍 ， 因 为 屏幕 上 有 更 多 文字 ， 所 
以 这 是 有 效 的 。 在 移动 端 ， 实 际 可 见 的 文字 更 少 ， 所 以 反差 被 放大 了 。 


多 数 设计 病 使 用 斐 波 那 契 数 列 式 的 字号 组 合 。 在 移动 端 ， 应 该 缩小 比率 来 减少 字号 间 的 反差 。 比 如 ， 如 果 你 使 用 黄金 比例 
1.618 与 字号 相 乘 。 在 移动 端 ， 应 该 用 更 小 的 比例 1.382 来 蔡 代 。 


按 比 例 调 整 字 间距 


为 移动 端 调整 字号 时 ， 我 们 要 意识 到 字 间 距 发 生 了 必要 的 变化 。 


( 先 说 一 句 ， 不 应 该 调整 固有 字 距 。 固 有 字 距 是 两 个 字母 相互 组 合 时 的 距离 ， 使 它们 的 间距 与 其 他 字母 间距 在 视觉 上 统一 。 
创作 字体 时 ， 就 纳入 了 固有 字 距 的 考量 ， 这 个 过 程 可 能 要 花 上 数 月 。 如 果 你 选用 了 一 款 专 业 的 字体 ， 它 的 固有 字 距 就 是 合适 
的 ， 如 果 你 觉得 不 对 ， 请 换 一 个 字体 。) 


字 间 距 并 不 是 固有 字 距 。 字 间距 是 字体 中 应 用 在 所 有 字符 上 的 间距 。 通 常 你 也 不 应 该 调整 字 间 距 。 


大 字号 是 个 例外 ， 拿 标题 和 小 号 文字 (比如 脚注 ) 举例 。 大 号 文字 需要 减少 字 间 距 ， 小 号 文字 需要 增加 字 间 距 。 前 者 是 考虑 
到 分 组 ， 后 者 则 是 为 了 增强 对 比 。 如 果 你 在 调整 标题 ， 或 是 用 了 通常 字 间 距 紧 密 的 艺术 字体 ， 缩 小 时 可 能 就 需要 把 字 间 距 放 
开 一 点 。 


字体 是 一 门 工 艺 ， 设 计 炳 终 其 一 生 都 在 精心 打磨 。 的 确 如 此 ， 因 为 每 个 文字 、 每 种 字体 和 每 项 技术 都 带 来 了 新 的 挑战 。 没 有 
一 成 不 变 的 普 适 规律 。 假如 你 追求 易 读 性 ， 要 牢记 三 条 原则 : 行内 的 视觉 流 要 平顺 ， 空 间 层 级 要 清晰 ， 要 有 足够 的 对 比 。 这 
尤其 适用 于 移动 端 页 面 。 没有 不 可 撼动 的 规则 ， 全 和 凭 你 双眼 决断 。 不 过 本 文 的 指南 可 以 作为 理想 的 出 发 点 ， 让 你 在 移动 设备 
上 优美 地 排列 文字 。 
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e MS 
参考 $t 料 


e 移动 端 字体 7 准则 
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响应 式 设 计 原 则 


s AN 
参考 9r 料 


e 响应 式 布局 的 三 大 要 点 
e 两 大 设计 模式 塑造 高 可 读 性 的 网 页 布局 


响应 式 设 计 原则 
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中 文 排版 的 规范 
参考 资料 


e W3C: 中 文 排版 规范 


中 文 排版 的 规范 
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User Experience 


用 户 体验 ，User experience. 
JW 
参考 资料 


e User experience 


UX 
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页 面 滚动 条 出 现时 不 跳动 


当前 web 届 ， 绝 大 多 数 的 页 面 间 布 局 都 是 水 平 居 中 布局 ， 主 体 定 个 宽度 , 然后 水 平 居 中 。 然 而 ， 这 种 布局 有 一 个 存在 一 个 影响 
用 户 体 验 的 隐患 。 上 应 该 都 知道 ， 现 代 浏 览 器 滚动 条 默认 是 overflow:auto 类 型 的 ， 也 就 是 如 果 尺 寸 不 足 一 屏 ， 没 有 滚动 条 ; 超 
出 ， 出 现 滚动 条 。 


结果 就 会 造成 出 现 滚动 条 的 时 候 ， 页 面 会 向 左 侧 跳 动 一 下 ， 这 个 体验 上 是 会 有 一 个 微小 的 影响 的 。 


例如 ， 新 浪 微 博 ， 使 用 overflow-y: scroll; o 


缺点 :在 页 面 高 度 较 小 的 时 候 ， 依 然 会 保留 一 个 竺 陋 的 灰色 的 滚动 栏 ， 这 其 实 又 回 到 了 IE 当道 的 旧 社 会 时 代 。 现 代 浏 览 器 做 的 
那些 默认 视觉 优化 岂 不 是 白费 了 ， 想 想 就 好 痛心 。 


高 度 确定 的 
使 用 CSS 把 页 面 尺寸 布局 骨架 搭 好， 再 在 里 面 吐 数 据 。 于 是 ， 要 么 没有 滚动 条 ， 要 么 滚动 条 直接 出 现 。 不 会 出 现 跳动 。 


缺点 : 只 适合 一 些 特殊 的 定制 性 很 强 的 页 面 。 你 说 像 知 乎 这 样子 ， 高 度 随 内 容 而 定 的 页 面 ， 显 然 就 无 法 驾驭. 


更 好 的 解决 方案 


使 用 CSS3 计 算 calc 和 vw 单位 巧妙 实现 滚动 条 出 现 页 面 不 跳动 。 代 码 如 下 : 


.wrap-outer { 
margin-left: calc(100vw - 100%); 


VOTE, 


.wrap-outer { 
padding-left: calc(100vw - 100%); 


} 


说 明 : 


e .wrap-outer 指 的 是 居中 定 宽 主体 的 父 级 ， 如 果 没 有 有， 创建 一 个 (使 用 主体 也 是 可 以 实现 类 似 效果 ， 不 过 本 着 宽度 分 离 原 
则 ， 不 推荐 ) 

e calc 是 CSS3 中 的 计算 ，IE10+ 浏 览 器 支持 ，IE9 浏 览 器 基本 支持 (不 能 用 在 background-position 上 ) ; 

e 100vw 相 对 于 浏览 器 的 window.innerWidth， 是 浏览 器 的 内 部 宽度 ， 注 意 ， 滚 动 条 宽度 也 计算 在 内 ! 而 100% 是 可 用 宽 
度 ， 是 不 含 滚 动 条 的 宽度 。 

e calc(100vw - 100%) 就 是 浏览 器 滚动 条 的 宽度 大 小 〈 如 果 有 ， 如 果 没 有 滚动 条 则 是 0) 上! 左右 都 有 一 个 滚动 条 宽度 (或 都 
是 0) 被 占用 ， 主 体内 容 就 可 以 永远 居中 浏览 器 啦 ， 从 而 没有 任何 跳动 ! 


兼容 性 :IE9+ 以 及 其 他 现代 浏览 器 。 


缺点 : 窄 屏幕 宽度 下 的 处 理 。 浏 览 器 宽度 比较 小 的 时 人 息 ， 左 侧 留 的 白明 显 与 右边 多 ， 说 不 定 会 显得 有 点 傻 。 那 么 就 在 响应 式 的 
时 候 进 行 如 上 处 理 。 
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e 小 tip: 纯 CSS 让 overflow:auto 页 面 滚动 条 出 现时 不 跳动 
e fix-jumping-scrollbar 
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使 用 渐进 式 JPEG 来 提升 用 户 体 验 


今天 才 认 识 到 原来 JPEG 文 件 有 两 种 保存 方式 ， 分 别 是 Baseline JPEG (标准 型 ) 和 Progressive JPEG (渐进 式 ) 。 两 种 格式 
有 相同 尺寸 以 及 图 像 数 据 ， 扩 展 名 也 是 相同 的 ， 唯 一 的 区 别 是 二 者 显示 的 方式 不 同 。 


Baseline JPEG 


这 种 类 型 的 ]PEG 文 件 存 储 方式 是 按 从 上 到 下 的 扫描 方式 ， 把 每 一 行 顺序 的 保存 在 JPEG 文 件 中 。 打 开 这 个 文件 显示 它 的 内 容 
时 ， 数 据 将 按照 存储 时 的 顺序 从 上 到 下 一 行 一 行 的 被 显示 出 来 ， 直 到 所 有 的 数据 都 被 读 完 ， 就 完成 了 整 张 图 片 的 显示 。 如 果 
文件 较 大 或 者 网 络 下 载 速度 较 慢 ， 那 么 就 会 看 到 图 片 被 一 行 行 加 载 的 效果 ， 这 种 格式 的 ]PEG 没 有 什么 优点 ， 因 此 ， 一 般 都 
推荐 使 用 Progressive JPEG。 


Progressive JPEG 


和 Baseline 一 通 扫 描 不 同 ，Progressive JPEG 文 件 包含 多 次 扫描 ， 这 些 扫描 顺 寻 的 存储 在 JPEG 文 件 中 。 打 开 文 件 过 程 中 ， 
会 先 显示 整个 图 片 的 模糊 轮廓 ， 随 着 扫描 次 数 的 增加 ， 图 片 变 得 越 来 越 清晰 。 这 种 格式 的 主要 优点 是 在 网 络 较 慢 的 情况 下 ， 
可 以 看 到 图 片 的 轮廓 知道 正在 加 载 的 图 片 大 概 是 什么 。 在 一 些 网 站 打开 较 大 图 片 时 ， 你 就 会 注意 到 这 种 技术 。 


渐进 式 图 片 带 来 的 好 处 是 可 以 让 用 户 在 没有 下 载 完 图 片 就 可 以 看 到 最 终 图 像 的 大 臻 轮廓， 一 定 程度 上 可 以 提升 用 户 体验 。 
(瀑布 留 的 网 站 建议 还 是 使 用 标准 型 的 ) 


另外 渐进 式 的 图 片 的 大 小 并 不 会 和 基本 的 图 片 大 小 相差 很 多 ， 有 时 候 可 能 会 比 基 本 图 片 更 小 。 渐 进 式 的 图 片 的 缺点 就 是 吃 用 
户 的 CPU 和 内 存 ， 不 过 对 于 现在 的 电脑 来 说 这 点 图 片 的 计算 并 不 算 什 么 。 


如 何 保存 Progressive JPEG 图 片 


PhotoShop 


在 photoshop 中 有 "存储 为 web 所 用 格式 ”， 打 开 后 选择 "连续 "就 是 渐进 式 ]PEG。 
参考 资料 


e 使 用 渐进 式 JPEG 来 提升 用 户 体验 
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动画 相关 


介绍 一 些 动画 相关 的 内 容 ， 包 括 实例 ， 原 理 与 实现 。 
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跟 动 画 有 关 的 数学 和 物理 公式 
角度 与 弧度 互 转 


radians-degrees*Math.PI/180 
degrees-radians*180/Math.PI 


绷 鼠 标 指针 (或 任意 一 点 ) 旋转 


dx-mouse.x-object.x; 
dyzmouse.y-boject.y; 
object.rotation-Math.atan2(dy,dx)*180/Math.PI; 


创建 波 


(function(){ 
window. requestAnimationFrame(drawFrame, canvas); 
value=center+Math.sin(angle)+range; 
angle+=speed; 


30); 


创建 圆 形 


(function(){ 
window. requestAnimationFrame(drawFrame, canvas); 
xposition=centerX + Math.cos(angle) * radius; 
yposition=center + Math.sin(angle) * radius; 
angle += speed; 


30); 


€ E 


(function()( 
window.requestAnimationFrame(drawFrame, canvas); 
xposition-centerX + Math.cos(angle) * radiusX; 
yposition-center + Math.sin(angle) * radiusY; 
angle += speed; 


30); 


获得 两 点 间 的 距离 


RES 
dy = y2 - yi; 
dist - Math.sqrt(dx * dx * dy * dy); 
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绘制 一 条 穿越 某 个 点 的 曲线 


WO ES) 
y1-2yt *2 - (y0 * y2) 
context.moveTo(x0, y0); 
context.quadraticCurveTo(x1, y1, x2, y2); 


yo 
JS 


将 角速度 分 解 为 X、y 轴 上 的 速度 向 量 


vx = speed * Math.cos(angle); 
vy = speed * Math.sin(angle); 


将 角 加 速度 (作用 于 物体 上 的 力 ) 分 解 为 X、y 轴 上 的 加 速度 


ax = force * Math.cos(angle); 
ay = force * Math.sin(agnle); 


将 加 速度 加 入 速度 向 量 


vx += ax; 
vy += ay; 


将 速度 向 量 加 入 位 置 坐标 


object.x += vx; 
object.y += vy; 


移 除 越界 物体 


if(object.x - object.width /2 > right || 
object.x + object.width /2 < left || 
object.y - object.height /2 > bottom || 
object.y + object.height /2 < top){ 


重 置 越界 物体 


if(object.x - object.width /2 > right || 
object.x + object.width /2 < left || 
object.y - object.height /2 > bottom || 
object.y + object.height /2 < top){ 
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屏幕 环绕 越界 物体 


if(object.x - object.width /2 > right)( 
object.x = left - object.width / 2; 

jelse if(object.x + object.width /2 < left){ 
object.x = right + object.width /2; 

J 

if(object.y - object.height / 2 > bottom){ 
object.y = top - object.height / 2; 

jelse if(object.y + object.height / 2 < top){ 
object.y = bottom + object.height /2; 


} 


应 用 摩擦 力 (正确 方法 ) 


speed = Math.sqrt(vx * vx + vy * vy); 
angle - Math.atan2(vy, vx); 
if(speed > friction)( 


speed -- friction; 
}else{ 
speed = 0; 
J 
vx - Math.cos(angle) * speed; 


vy - Math.sin(angle) * speed; 


应 用 摩擦 力 (简便 方法 ) 


vx *- friction; 
vy *- friction; 


Ir 


object.x += (targetX - object.x) * easing; 
object.y += (targetY - object.y) * easing; 


简单 弹 动 


vx *- (targetX - object.x) * spring; 
vy *- (targetY - object.y) * spring; 
object.x += (vx *- friction); 
object.y += (vy *- friction); 


有 偏 移 量 的 弹 动 


var dx = object.x - fixedX, 
dy = object.y - fixedY, 
angle = Math.atan2(dy,dx), 
targetX = fixedX + Math.cos(angle) * springLength, 
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targetY = fixedX + Math.sin(angle) * springLength; 


基于 距离 的 碰撞 检测 


var dx = objectB.x - objectA.x, 
dy = objectB.y - objectB.y, 
dist = Math.sqrt(dx * dx + dy * dy); 


if(dist < objectA.radius + objectB.radius)( 


多 物理 碰撞 检测 


objects.forEach(function(objectA, i){ 
for(var j = i + 1; j < objects.length; j++){ 
var objectB = objects[j]; 
// 执 行 碰撞 检测 ， 在 objectA 和 objectB 之 间 。 


H 
D 


坐标 旋转 


x1 = x * Math.cos(rotation) - y * Math.sin(rotation); 
y1 = y * Math.cos(rotation) + x * Math.sin(rotation); 


反 向 坐标 旋转 


x1 = x * Math.cos(rotation) + y * Math.sin(rotation); 


y1 = y * Math.cos(rotation) 


动量 守恒 


var vxTotal = vx0 -vxi1; 


vx0 = ((ballO.mass -balli.mass) * vxO + 2 * balli.mass * vx1) / (ballO.mass + balli.mass); 


vx1 = vxTotal + vx0; 


万 有 引力 


- x * Math.sin(rotation); 


function gravitate(partA, partB)( 
var dx - partB.x - partA.x; 
dy = partB.y - partA.y; 
distsQ — c dxo*odx dy dy; 
dist - Math.sqrt(distSQ); 
force - partA.mass * partB.mass / distSQ; 


ax = force * dx /dist; 


ay - force * dy / dist; 
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partA.vx += ax / partA.mass; 
partA.vy += ax / partA.mass; 
partB.vx -- ax / partB.mass; 
partB.vy -- ax / partB.mass; 


余弦 定理 


var A = Math.-acos((D bte oo ea ay (2 7p = cj; 
var B- Nath- acosa sa ee eE sob) (2 a oy 
var C = Math-acos((a * atb ba Cc e] (27a pyy 


基本 透视 图 


scale - fl / (fl * zpos); 

object.scaleX - object.scaleY - scale; 
object.alpha - scale; 

object.x = vanishingPointX + xpos * scale; 
object.y = vanishingPointY + ypos * scale; 


ZHE 


function zSort(a, b){ 
return (b.zpos - a.pos); 


J 


objects.sort(zsort); 


坐标 旋转 


X1 = xpos * cos(angleZ) - ypos * sin(anglez); 
y1 = ypos * cos(angleZ) - xpos * sin(anglez); 


X1 - xpos * cos(angleY) - zpos * sin(angleY); 
Z1 = zpos * cos(angleY) + xpos * sin(angleY); 


y1 = ypos * cos(angleX) - zpos * sin(angleX); 
zl = zpos * cos(angleX) + ypos * sin(angleX); 


— E ER S 
dist = Math.sqrt(dx * dx + dy * dy + dz * dz); 


Je MS 
参考 $r 料 


e AQuick Look Into The Math Of Animations With JavaScript 


跟 动画 有 关 的 数学 和 物理 公式 
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g Re 
缓 动 的 原理 与 实现 
动画 就 是 以 一 定 的 频率 去 改变 元 素 的 属性 ， 使 之 运动 起 来 ， 最 普通 的 动画 就 是 匀速 的 动画 ， 每 次 增加 固定 的 值 。 缓 动 就 是 用 


来 修改 每 次 增加 的 值 ， 让 其 按照 不 规律 的 方式 增加 ， 实 现 动画 的 变化 。 


程序 实现 缓 动 


没有 加 速度 的 线性 运动 


数学 公式 为 : f(x)=x ,代码 如 下 : 


AnimationTimer.makeLinear = function () { 
return function (percentComplete) { 


return percentComplete; 
HE 
NE 
逐渐 加 速 的 缓 人 运动 
数学 公式 为 : f(x)=x^2 ,代码 如 下 : 


AnimationTimer.makeEaseIn = function (strength) { 


return function (percentComplete) { 
return Math.pow(percentComplete, strength*2); 


YN 
YN 
N ~ si N x n= 一 
逐渐 减速 的 缓 出 运动 
数学 公式 为 : f(x)=1-(1-x)^2 ,代码 如 下 : 

AnimationTimer.makeEaseOut = function (strength) { 

return function (percentComplete) { 

Math.pow(1 - percentComplete, strength*2); 


return 1 
NE 
ME 


组 入 缓 出 运动 


数学 公式 为 : f(x)=x-sin(x*2n)/(2n) , 代码 如 下 : 


AnimationTimer.makeEaseInOut = function () { 
return function (percentComplete) { 
return percentComplete - Math.sin(percentComplete*2*Math.PI) / (2*Math.PI); 
163 
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数学 公式 为 : f(x)=(1-cos(x*Npasses * n) * (1-n))+x ,Npassed 表 示 运 动物 体 穿越 中 轴 的 次 数 。 代码 如 下 : 


AnimationTimer.makeElastic = function (passes) { 
passes - passes || 3; 
return function (percentComplete) { 
return ((i-Math.cos(percentComplete * Math.PI * passes)) * 
(1 - percentComplete)) + percentComplete; 
Nu 
J; 


## 弹跳 运动 
Nbounces 表 示 运 动物 体 被 弹 起 的 总 次 数 ， 弹 起 的 次 数 为 偶数 的 时 候 ， 数 学 公式 为 : 


f(x)=(1=cos(x Nbounces rt) * (1-7))+x 


弹 起 的 次 数 为 奇数 的 时 候 ， 数 学 公式 为 : 


f(x)=2-(((1-cos(x rt Nbounces)) * (1-X)+X) 


代码 如 下 : 


AnimationTimer.makeBounce = function (bounces) { var fn = AnimationTimer.makeElastic(bounces); return function 
(percentComplete) ( percentComplete = fn(percentComplete); return percentComplete «- 1 ? percentComplete : 2- 
percentComplete; }; y; ^" 


T y MS 
-人 ^ 
参考 资 米 


e jQuery Easing Plugin 
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rb = 3$ - 

第 用 动 男 与 缓 动 

单 页 面 

单 页 面 不 同 锚 点 之 间 的 跳 转 ， 常 用 的 缓 动 效 果 是 ， 慢 -> 快 -> 慢 。 对 应 的 缓 动 是 : easeInoutQuart o 


hover 效 果 


mouseenter 的 时 候 立 即 显 示 , mouseleave 的 时 候 ， 做 一 个 延 时 。 体 验 上 会 更 好 。 


~p» a 
参考 资料 


e 视 “ 差 ?滚动 浅 析 
e 动 效 设计 的 物理 法 则 
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常用 动画 效果 与 绥 动 
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SVG # iÈ] 


制作 的 过 程 ， 一 般 都 是 先 用 绘图 工具 绘制 出 来 然后 再 加 的 动画 。 用 ai 或 其 他 矢量 工具 画 ， 导 出 Svg。 


库 文 件 


e vivus: 可 控制 svg 绘制 动画 。 

e Bonsa 

e Velocity.js:Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. 

e Raphaël: Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. 

e SnapSVG: Snap was written entirely from scratch by the author of Raphaél (Dmitry Baranovskiy), and is designed 
specifically for modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera). 

e Walkway: Walkway 支持 3 种 方式 , path, line 和 用 polyline 来 画 的 svg 线 。 它 提供 了 一 个 很 好 的 例子 ， 绘 制 了 一 个 
PlayStation 的 集合 动画 。 

e SVG.s 

e CHARTISTJS : SIMPLE RESPONSIVE CHARTS 


e MN 
2 Tr 料 


e 如 何 绘制 SVG 格式 的 图 标 
e Svg 动 画 的 实现 
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原理 性 质 


讲述 一 些 底层 的 东西 。 


参考 资料 


e awesome-wpo 





原理 性 质 
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单线 程 的 Javascript 


浏览 器 的 内 核 是 多 线程 的 ， 它 们 在 内 核 制 控 下 相互 配合 以 保持 同步 ， 一 个 浏览 器 至 少 实现 三 个 常 驻 线程 : 


e javascript 引 擎 线程 javascript 引 擎 是 基于 事件 驱动 单线 程 执 行 的 ，JS 引 擎 一 直 等 待 着 任务 队列 中 任务 的 到 来 ， 然 后 加 以 
义理 ， 浏 览 器 无 论 什 么 时 候 都 只 有 一 个 JS 线程 在 运行 JS 程序 。 

e GUI 泻 染 线程 GUI 泻 染 线程 负责 演 染 浏览 器 界面 ， 当 界面 需要 重 绘 (Repaint) 或 由 于 某 种 操作 引发 回流 (reflow) 时 ,该 线 
程 就 会 执行 。 但 需要 注意 GUI 演 染 线程 与 JS 引 警 是 互 斥 的 ， 当 JS 引擎 执行 时 GUI 线程 会 被 挂 起 ，GUI 更 新 会 被 保存 在 一 
个 队列 中 等 到 JS 引擎 空 闵 时 立即 被 执行 。 

e 浏览 器 事件 触发 线程 事件 触发 线程 ， 当 一 个 事件 被 触发 时 该 线程 会 把 事件 添加 到 待人 处 理 队列 的 队 尾 ， 等 待 JS 引 擎 的 处 
理 。 这 些 事件 可 来 自 JavaScript 引 擎 当前 执行 的 代码 块 如 setTimeOut、 也 可 来 自 浏览 器 内 核 的 其 他 线程 如 鼠标 点 击 、 
AJAX 异 步 请 求 等 ， 但 由 于 JS 的 单线 程 关 系 所 有 这 些 事件 都 得 排队 等 待 JS 引 擎 处理。 〈 当 线程 中 没有 执行 任何 同步 代码 
的 前 提 下 才 会 执行 异步 代码 ) 


x ` Dr ` 
单线 程 的 证 明 
下 面 的 代码 ， 当 while 执 行 时 候 ，setTimeout 永 远 不 会 执行 。 


var isEnd = true; 
window.setTimeout(function () { 
isEnd = false;//1s 后 ， 改 变 isEnd 的 值 
), 1000); 
/ /3x^whilezki&BU FH T jsf, BHrisetTimeout£&mBp kie T AT 
while (isEnd); 
//alert 也 永远 不 会 弹出 
alert('end'); 











e MSN 
2 TL 料 


e JavaScript 的 计时 器 的 工作 原理 
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v83 引 | 擎 


JavaScript 在 V8 引擎 中 是 如 何 工作 的 ? 


组 成 部 分 


e 一 个 基本 的 编译 器 (basecompiler) ， 在 你 的 代码 运行 之 前 ， 它 会 分 析 你 的 JavaScript 代 码 并 且 生 成 本 地 的 机 器 码 ， 而 
不 是 通过 字 节 码 的 方式 来 运行 ， 也 不 是 简单 地 解释 它 。 这 种 机 器 码 起 初 是 没有 被 高 度 优化 的 。 

e V8 通 过 对 象 模型 (objectmodel) 来 表达 你 的 对 象 。 对 象 是 在 JavaScript 中 是 以 关联 数组 的 方式 呈现 的 ， 但 是 在 V8 引擎 
中 ， 它 们 是 通过 隐藏 类 (hiddenclasses) 的 方式 来 表示 的 。 这 是 一 种 可 以 优化 查找 的 内 部 类 型 机 制 
(internaltypesystem) 。 

e 一 个 运行 期 剖析 器 (runtimeprofiler) ， 它 会 监视 正在 运行 的 系统 ， 并 且 标 识 出 “热点 " 辑 数 (“hot"function) ， 也 就 是 那 
些 最 后 会 花费 大 量 运行 时 间 的 代码 。 

e 一 个 优化 编译 器 (optimizingcompiler) ， 重 新 编译 并 优化 运行 期 剖析 器 所 标识 “热点 "代码 ， 然 后 执行 优化 ， 例 如 ， 把 代 
码 进行 内 联 化 (inlining) (也 就 是 在 画 数 被 调用 的 地 方 用 画 数 主体 去 取代 ) 。 

e V8 引擎 支持 逆 优 化 (deoptimization) ， 意 味 着 如 果 优 化 编译 器 发 现在 某 些 假定 的 情况 下 ， 把 一 些 已 经 优化 的 代码 进行 
了 过 度 的 优化 ， 它 就 会 把 它 门 从 生成 的 代码 中 抽 离 出 来 。 

e V8 拥有 垃圾 回收 器 。 理 解 它 是 如 何 运作 的 和 理解 如 何 优 化 你 的 JavaScript 代 码 同等 重要 。 


垃圾 回收 


垃圾 回收 是 一 种 内 存 管 理 机 制 。 垃 圾 回收 器 的 概念 是 ， 它 会 尝试 去 重新 分 配 已 经 不 需要 的 对 象 所 占据 的 内 存 空间 。 在 如 
JavaScript 拥 有 垃圾 回收 机 制 的 语言 中 ， 如 果 你 的 程序 中 仍然 存在 指向 一 个 对 象 的 引用 ， 那 么 该 对 象 将 不 会 被 回收 。 


在 大 多 数 的 情况 下 ， 我 们 没有 必要 去 手动 得 解除 对 象 的 引用 (de-referencing) 。 只 要 简单 地 把 变量 放 在 它们 应 该 的 地 方 (在 


理想 的 情况 下 ， 变 量 应 该 尽量 为 局 部 变量 ， 也 就 是 说 ， 在 它们 被 使 用 的 函数 中 声明 它们 ， 而 不 是 在 更 外 层 的 作用 域 ) ， 垃 圾 
就 能 正确 地 被 回收 。 


e a 
参考 Tr 料 


e 编写 快速 、 高 效 的 JavaScript 代 码 
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浏览 器 显示 页 面 的 原理 


e 获取 HTML 文档 及 样式 表 文 件 
e 解析 成 对 应 的 树 形 数据 结构 
o DOM tree 
o CSSOM tree 
e 计算 可 见 节点 形成 render tree 
e 计算 DOM 的 形状 及 位 置 进行 布局 
e 将 每 个 节点 转化 为 实际 像素 绘制 到 视 口 上 ORAE) 


render tree (页 面 上 所 显示 的 最 终结 果 ) 是 由 DOM tree. (开发 工具 中 所 显示 的 HTML 所 定义 的 内 容 结构 ) 与 CSSOM 


。 本 身 不 可 见 的 
o «html» 
o <head> 
o <meta> 
o <link> 
o <style> 
o <script> 


e 设置 了 display: none; 样式 的 


T E MSN 
^ N 
参考 资料 


e 浏览 器 的 工作 原理 : 新 式 网 络 浏览 器 幕后 揭秘 

e 开发 者 需要 了 解 的 WebKit 

e 理解 WebKit 和 Chromium: HTML 解 析 和 DOM 

e 前 端 文摘 : 深入 解析 浏览 器 的 幕后 工作 原理 

e 浏览 器 的 泻 染 原理 简介 

e 专题 : 浏览 器 原理 

e 浏览 器 加 载 和 泻 染 HTML 的 顺序 以 及 Gzip 的 问题 

e 从 FE 的 角度 上 再 看 输入 url 后 都 发 生 了 什么 

e 当 你 在 浏览 器 中 输入 Google.com 并 且 按 下 回 车 之 后 发 生 了 什么 ? 


o DR 


in 
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JS 动画 性 能 


Je MS 
参考 $t 料 


e 求索 : GSAP 的 动画 快 于 jQuery 吗 ? 为何? 


JS 动画 性 能 
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Repaint 和 Reflow 


Ze v MSN 
^ ^ 
225 y 


e 翻译 : 让 网 络 更 快 一 些 一 一 最 小 化 浏览 器 中 的 回流 (reflow) 

e 回流 与 重 绘 : CSS 性 能 让 JavaScript 变 慢 ? 

e 探讨 css 中 repaint 和 reflow 

e REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW? 
e css Triggers: 查询 哪些 属性 会 引起 repaint 或 reflow。 

e Google: Make the Web Faster 

e 页 面 重 绘 和 回流 以 及 优化 





Repaint 和 Reflow 172 





前 端 工程 病 手 册 





URL 编 码 与 解码 


Je MS 
参考 $r 料 


e URL 编 码 与 解码 


URL 编 码 与 解码 
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性 能 优化 


主要 说 一 说 前 端的 的 集成 解决 方案 ， 目 前 各 自 公司 都 会 有 自己 的 一 套 方式 ， 国 外 Facebook, 国 内 的 baidu 做 的 尤为 出 色 。 








性 能 优化 
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4 

2a #9 34, 23 

一 方面 是 代码 缩减 的 问题 ， 另 一 方面 是 语法 结构 的 问题 。 

代码 缩减 ， 好 像 有 个 文件 叫做 .editorconfig , 能 够 控制 文本 的 缩减 。 


代码 的 语法 规范 ，js 提 供 了 一 个 .jshintrc . 
Je Mns 
参考 资料 


e EditConfig 
e ESLint 
e JSHint 


e JavaScript 风格 指南 /编码 规范 (Airbnb 公 司 版 ) 
e jQuery 编码 简洁 之 道 

e CoffeeScript 编码 风格 指南 

e node-style-guide 


e bootstrap style 

e Standards for developing flexible, durable, and sustainable HTML and CSS 
e Front-end Code Standards & Best Practices 

e Baidu EFE team specifications 

e. 支付 宝 : 写 样式 的 更 好 方式 

e frontend-guidelines: github 上 很 受 欢迎 的 一 份 编码 规范 , star 数 超过 4000+ 

e 编写 更 好 的 CSS 代 三 


编码 规范 
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JavaScript 代 码 最 佳 实践 


不 要 类 型 转换 
JavaScript 是 动态 类 型 ， 但 如 果 你 想 提高 速度 不 要 使 用 该 功能 。 尽 量 保持 变量 的 类 型 一 致 。 这 也 适用 于 数组 ， 尽 管 主要 是 由 


浏览 器 都 进行 了 优化 ,但 尽量 不 要 混用 不 同类 型 的 数组 。 这 就 是 为 何 编译 成 JavaScript 的 C/C++ 代码 使 用 静态 类 型 的 原因 之 


o 


字符 串 与 数字 类 型 间 相 互 转换 , 一 般 使 用 parselnt 函 数 是 正确 的 。 


不 要 重新 构造 对 象 


重组 对 象 不 便宜 ， 应 该 避免 它 , 不 要 使 用 delete 运 算 符 。 








不 要 以 后 再 添加 属性 , 尽量 不 要 在 以 后 再 添加 属性 ， 最 好 从 一 开始 就 定义 对 象 的 架构 。 这 在 Firefox 中 快 100%， 在 Chrome 中 
快 89%。 


字符 串联 连 
字符 串联 连 是 一 个 非常 昂贵 的 操作 ， 但 是 应 该 用 什么 方法 呢 ? 当然 不 是 Array.prototype.join。 


+= 运 算 符 似乎 比 + 快 很 多 ， 他 们 在 两 种 浏览 器 上 上 比 String.prototype.concat 和 Array.prototype.join 都 更 快 。Array.prototype.join 
是 最 慢 的 ， 符 合 市 场 预 期 。 


正确 的 使 用 正则 表达 式 
使 用 RegExp.prototype.exec 是 没有 必要 ， 不 是 吗 ? 


然而 ，RegExp.prototype.test 和 String.prototype.search 之 间 是 有 性 能 差异 的 ， 让 我 们 来 看 看 哪个 方法 更 快 : 正则 表达 式 的 方 
法 


RegExp.prototype.exec 比 String.prototype.match 快 了 不 少 ， 但 他 们 是 不 完全 一 样 的 未 西 ， 它 们 的 区 别 超出 了 本 文 的 范围 ， 看 
这 个 问答 。 


RegEx.prototype.test 更 快 ， 可 能 是 因为 它 不 返回 找到 匹配 的 索引 。 String.prototype.search 应 仅 用 于 找到 所 需 的 匹配 的 索 
引 。 


然而 ， 你 不 应 该 使 用 正则 表达 式 来 查找 另 一 个 字符 串 的 位 置 ， 你 可 以 使 用 String.prototype.indexOf 方 法 。 
String.prototype.search VS String.prototype.indexOf 
另 一 个 有 趣 的 基准 是 String.prototype.indexOf VS RegExp.prototype.test， 我 个 人 预计 后 者 要 快 ， 这 是 在 Firefox 中 发 生 的 事 


情 ， 但 在 Chrome 中 ， 事 实 并 非 如 此 。 RegExp.prototype.test 在 Firefox 中 快 32%， 而 在 Chrome 中 String.prototype.indexOf 快 
33%。 在 这 种 情况 下 ， 你 自己 选择 喜欢 的 方式 吧 。 


限制 声明 /传递 变量 的 范围 〈 作 用 域 ) 


假如 你 调用 一 个 函数 ， 浏 览 器 必须 做 一 些 所 谓 的 范围 查找 ， 它 的 昂贵 程度 取决 于 它 要 查找 多 少 范 围 。 尽 量 不 要 依赖 全 局 /高 范 
围 的 变量 ， 尽 量 使 局 部 范围 交 量 ， 并 将 它们 传递 给 男 数 。 更 少 的 范围 查找 ， 更 少 的 物 牲 速度 。 


这 个 测试 告诉 我 们 ， 从 局 部 范围 内 传递 和 使 用 变量 比 从 更 高 的 声明 范围 查找 变量 快 ， 无 论 是 Chrome 和 Firefox。 
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你 不 需要 所 有 的 东西 都 用 jQuery 


大 多 数 开发 者 使 用 jQuery 做 一 些 简单 的 任务 ， 我 的 意思 在 一 些 场 合 你 没有 必要 使 用 jQuery， 你 觉得 用 $.val() 始 终 是 必要 的 
吗 ? 就 拿 这 个 例子 : 


$('input').keyup(function() { 
if(S(this).val() 2-- 'bYah"') f£ 22-3 
35 


这 是 学 习 如 何 使 用 JavaScript 修 改 DOM 的 最 重要 原因 之 一 ， 这 样 你 可 以 编写 更 高 效 的 代码 。 用 纯 JavaScript100% 完 成 同样 的 


功能 100% 的 速度 更 快 : 


$('input').keyup(function() { 
if(this.value === 'blah') { ... } 
35 


s MSN 
参考 $t 料 


e 编写 高 质量 JavaScript 代 码 的 基本 要 点 

e Thinkful: Javascript Best Practices 

e 让 我 们 写 快 速 的 JavaScript,JS 性 能 优化 小 窍门 
e 编写 快速 、 高 效 的 JavaScript 代 码 

e 编写 更 加 稳定 /可 读 的 javascript 代 码 
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PC 优化 手段 在 Mobile 侧 同样 适用 
在 Mobile 侧 我 们 提出 三 秒 种 泻 染 完成 首 屏 指标 
首 屏 加 载 3 秒 完成 或 使 用 Loading 
基于 联通 3G 网 络 平均 338KB/s(2.71Mb/s)， 所 以 首 屏 资源 不 应 超过 1014KB 
Mobile 侧 因 手 机 配置 原因 ， 除 加 载 外 泻 染 速 度 也 是 优化 重点 





1. 合并 CSS、jJavaScript 1， 使 用 智 图 http://zhitu.tencent.com/ 

2 合并 小 图 片 ， 使 用 委 怕 图 2. (BFHR(CSS3, SVG, IconFont ) REEK 

3， 缓 存 一 切 可 缓存 的 资源 BA 3， 使 用 Srcset 

4， 使 用 长 Cache 4，webpP 优 于 JPG 

5， 使 用 外 联 式 引用 CSS、JavaScript 5，、PNG8 优 于 GIF 

6. FEHRHTML, CSS, JavaScript 6， 首 次 加 载 不 大 于 1014KB ( 基于 3 秒 联 通 平 
加 载 优化 7 启用 Gzip 图 片 优化 均 网 速 所 能 达到 值 ) 

8， 使 用 首 屏 加 载 7 图 片 不 宽 于 640 

9， 使 用 按 需 加 载 

10. 使 用 滚屏 加 载 

11. 通过 Media Query 加 载 1 减少 重 绘 和 回流 

12. 增加 Loading 进 度 条 2， 缓 存 Dom 选 择 与 计算 

13. 减少 Cookie 3， 缓 存 列表 .length 

14. 避免 重 定向 4.， 尽 量 使 用 事件 代理 ， 避 免 批 量 绑 定 事件 

15. 异步 加 载 第 三 方 资源 5， 尽 量 使 用 ID 选择 器 

6. fiFBtouchstart, touchend4X£&click 
脚本 优化 

1. (CS5 写 在 头 部 ，jJavaScript 写 在 尾部 或 异步 1，HTML 使 用 Viewport 

2， 避 免 图 片 和 iFrame 等 的 室 Src 2. 减少 Dom 节 点 

3. 尽量 避免 重 设 图 片 大 小 3， 尽 量 使 用 C993 动 画 

4， 图 片 尽量 避免 使 用 DataURL 4， 合 理 使 requestAnimationFrame 动 画 代 

5， 尽 量 避 免 写 在 HTML 标 签 中 写 Style 属 性 setTimeout 

6， 避 免 CSS 表 达 式 5. 适当 使 用 Canvas 动 画 
Css 优 化 7， 移 除 空 的 CSS 规 则 泻 染 优化 6. Touchmove, Scroll 事件 会 导致 多 次 泻 染 

8， 正 确 使 用 Display 的 属性 7. 使 用 ( CSS3 transitions, CSS3 3D 

9， 不 滥用 Float transforms, Opacity, Canvas, WebGL, 

10. 不 滥用 Web 字 体 Video ) 来 触发 GPU 泻 染 


11. 不 声明 过 多 的 Font-size 

12. 值 为 0 时 不 需要 任何 单位 

13. 标准 化 各 种 浏览 器 前 缀 

14. 避免 让 选择 符 看 起 来 像 正 则 表达 式 


A 
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概述 


. PC 优化 手段 在 Mobile 侧 同样 适用 

.在 Mobile 侧 我 们 提出 三 秒 种 泻 染 完 成 首 屏 指标 

基于 第 二 点 ， 首 屏 加 载 3 秒 完成 或 使 用 Loading 

. 基于 联通 3G 网 络 平均 338KB/s(2.71Mb/s)， 所 以 首 屏 资 源 不 应 超过 1014KB 
.Mobile 侧 因 手 机 配置 原因 ， 除 加 载 外 泻 染 速 度 也 是 优化 重点 

基于 第 五 点 ， 要 合理 处 理 代码 减少 泻 染 损耗 

基于 第 二 、 第 五 点 ， 所 有 影响 首 屏 加 载 和 泻 染 的 代码 应 在 处 理 罗 辑 中 后 置 
.加 载 完 成 后 用 户 交互 使 用 时 也 需 注意 性 能 





0 00 509NMP 


加 载 优化 


加 载 过 程 是 最 为 耗 时 的 过 程 ， 可 能 会 占 到 总 耗 时 的 80% 时 间 ， 因 此 是 优化 的 重点 
减少 HTTP 请 求 


因为 手机 浏览 器 同时 响应 请 求 为 4 个 请 求 (Android 支 持 4 个 ，iOS 5 后 可 支持 6 个 ) ， 所 以 要 尽量 减少 页 面 的 请 求 数 ， 首 次 加 
载 同时 请 求 数 不 能 超过 4 个 。 


缓存 


使 用 缓存 可 以 减少 向 服务 器 的 请 求 数 ， 节 省 加 载 时 间 ， 所 以 所 有 静态 资源 都 要 在 服务 器 端 设 置 缓存 ， 并 且 尽 量 使 用 长 
Cache (长 Cache 资 源 的 更 新 可 使 用 时 间 戳 ) 


e 缓存 一 切 可 缓存 的 资源 


e 使 用 长 Cache 〈 使 用 时 间 戳 更 新 Cache) 
e 使 用 外 联 式 引用 CSS、JavaScript 


压缩 HTML、CSS、JavaScript 
减少 资源 大 小 可 以 加 快 网 页 显示 速度 ， 所 以 要 对 HTML、CSS、JavaScript 等 进行 代码 压缩 ， 并 在 服务 器 端 设置 GZip 


e 压缩 (例如 ， 多 余 的 空格 、 换 行 符 和 缩 进 ) 
e 启用 Gzip 


无 阻塞 


写 在 HTML 头 部 的 JavaScript (无 异步 ) ， 和 写 在 HTML 标 签 中 的 Style 会 阻塞 页 面 的 渲染 ， 因 此 CSS 放 在 页 面 头 部 并 使 用 Link 
方式 引入 ， 避 免 在 HTML 标 签 中 写 Style，JavaScript 放 在 页 面 尾部 或 使 用 异步 方式 加 载 





使 用 首 屏 加 载 


首 屏 的 快速 显示 ， 可 以 大 大 提升 用 户 对 页 面 速 度 的 感知 ， 因 此 应 尽量 针对 首 屏 的 快速 显示 做 优化 





按 需 加 载 


将 不 影响 首 屏 的 资源 和 当前 屏幕 资源 不 用 的 资源 放 到 用 户 需 要 时 才 加 载 ， 可 以 大 大 提升 重要 资源 的 显示 速度 和 降低 总 体 流 
量 ， 但 按 需 加 载 会 导致 大 量 重 绘 ， 影 响 泻 染 性 能 。 


e LazyLoad 
e 滚屏 加 载 
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e 通过 Media Query 加 载 


预 加 载 


大 型 重 资源 页 面 ( 如 游戏 ) 可 使 用 增加 Loading 的 方法 ， 资 源 加 载 完成 后 再 显示 页 面 。 但 Loading 时 间 过 长 ， 会 造成 用 户 流失 
对 用 户 行为 分 析 ， 可 以 在 当前 页 加 载 下 一 页 资源 ， 提 升 速度 


e 可 感知 Loading( 如 进入 空间 游戏 的 Loading) 
e 不 可 感知 的 Loading (如 提前 加 载 下 一 页 ) 


压缩 图 片 


图 片 是 最 占 流量 的 资源 ， 因 此 尽量 避免 使 用 他 ， 使 用 时 选择 最 合适 的 格式 (实现 需求 的 前 提 下 ， 以 大 小 判断 ) ， 合 适 的 大 
小 ， 然 后 使 用 智 图 压缩 ， 同 时 在 代码 中 用 Srcset 来 按 需 显示 


e 使 用 智 图 〈 http://zhitu.tencent.com/ ) 

e 使 用 其 它 方式 代替 图 片 (1. 使 用 CSS3 2. 使 用 SVG 3. 使 用 IconFont) 

e 使 用 Srcset 

e 选择 合适 的 图 片 (1. webP 优 于 JPG 2. PNG8 优 于 GIF) 

e 选择 合适 的 大 小 (1. 首次 加 载 不 大 于 1014KB 2. 不 宽 于 640 (基于 手机 屏幕 一 般 宽度 ) ) 





减少 Cookie 

Cookie 会 影响 加 载 速度 ， 所 以 静态 资源 域名 不 使 用 Cookie 
避免 重 定向 

重 定向 会 影响 加 载 速 度 ， 所 以 在 服务 器 正确 设置 避免 重 定向 
异步 加 载 第 三 方 资源 

第 三 方 资源 不 可 控 会 影响 页 面 的 加 载 和 显示 ， 因 此 要 有 异步 加 载 第 三 方 资源 


JavaScript 优 化 


脚本 处 理 不 当 会 阻塞 页 面 加 载 、 泻 染 ， 因 此 在 使 用 时 需 当 注意 : 

e CSS 写 在 头 部 ，JavaScript 写 在 尾部 或 异步 

e 避免 图 片 和 iFrame 等 的 空 Src: 空 Src 会 重新 加 载 当前 页 面 ， 影 响 速 度 和 效率 

e 尽量 避免 重 设 图 片 大 小 : 重 设 图 片 大 小 是 指 在 页 面 、CSS、JavaScript 等 中 多 次 重 置 图 片 大 小 ， 多 次 重 设 图 片 大 小 会 引发 
图 片 的 多 次 重 绘 ， 影 响 性 能 

e 图 片 尽量 避免 使 用 DataURL: DataURL 图 片 没 有 使 用 图 片 的 压缩 算法 文件 会 变 大 ， 并 且 要 解码 后 再 泻 染 ， 加 载 慢 耗 时 长 


CSS 优 化 


尽量 避免 写 在 HTML 标 签 中 写 Style 属 性 


避免 CSS 表 达 式 


CSS 表 达 式 的 执行 需 跳 出 CSS 树 的 泻 染 ， 因 此 请 避免 CSS 表 过 式 
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移 除 空 的 CSS 规 则 


空 的 CSS 规 则 增加 了 CSS 文 件 的 大 小 ， 且 影响 CSS 树 的 执行 ， 所 以 需 移 除 空 的 CSS 规 则 


正确 使 用 Display 的 属性 





Display 属 性 会 影响 页 面 的 泻 染 ， 因 此 请 合理 使 用 : 


a) display:inline 后 不 应 该 再 使 用 width、height、margin、padding 以 及 float b) display:inline-block 后 不 应该 再 使 用 float c) 
display:block 后 不 应 该 再 使 用 vertical-align d) display:table-* 后 不 应 该 再 使 用 margin 或 者 float 





不 滥用 Float 

Float 在 泻 染 时 计算 量 比较 大 ， 尽 量 减少 使 用 

不 小 用 Web 字 体 

Web 字 体 需 要 下 载 ， 解 析 ， 重 绘 当前 页 面 ， 尽 量 减 少 使 用 
不 声明 过 多 的 Font-size 

过 多 的 Font-size 引 发 CSS 树 的 效率 

值 为 0 时 不 需要 任何 单位 

为 了 浏览 器 的 兼容 性 和 性 能 ， 值 为 O 时 不 要 带 单位 
标准 化 各 种 浏览 器 前 级 

e 无 前 级 应 放 在 最 后 


e CSS 动 画 只 用 (-webkit- 无 前 级 ) 两 种 即 可 
e 其 它 前 级 为 -webkit- -moz- -ms- 无 前 级 四 种 ， (-0-Opera 浏 览 器 改 用 blink 内 核 ， 所 以 淘汰 ) 


避免 让 选择 符 看 起 来 像 正则 表达 式 


高 级 选择 器 执行 耗 时 长 且 不 易 读 懂 ， 避 免 使 用 


JavaScript 执 行 优化 


减少 重 绘 和 回流 
e 避免 不 必要 的 Dom 操 作 
e 尽量 改变 Class 而 不 是 Style， 使 用 classList 代 替 className 


e 避免 使 用 document.write 
e 减少 drawlmage 


缓存 Dom 选 择 与 计算 
每 次 Dom 选 择 都 要 计算 ， 缓 存 它 


缓存 列表 .length 
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每 次 .length 都 要 计算 ， 用 一 个 变量 保存 这 个 值 
尽量 使 用 事件 代理 ， 避 免 批量 绑 定 事件 
尽量 使 用 ID 选择 器 


TOUCH 事 件 优 化 


使 用 touchstart、touchend 代 蔡 click， 因 快 影响 速度 快 。 但 应 注意 Touch 响 应 过 快 ， 易 引发 误 操作 


HTML 使 用 Viewport 
Viewport 可 以 加 速 页 面 的 泻 染 ， 请 使 用 以 下 代码 «meta name-"viewport" content-"width-device-width, initial-scale-i"» 
减少 Dom 节 点 
Dom 节 点 太 多 影响 页 面 的 泻 染 ， 应 尽量 减少 Dom 节 点 
动画 优化 
e 尽量 使 用 CSS3 动 画 


e 合理 使 用 requestAnimationFrame 动 画 代 替 setTimeout 
e 适当 使 用 Canvas 动 画 5 个 元 素 以 内 使 用 css 动 画 ，5 个 以 上 使 用 Canvas 动 画 (iOS8 可 使 用 webGL) 


高 频 事 件 优化 
Touchmove, Scroll 事件 可 导致 多 次 演 染 


e 使 用 requestAnimationFrame 监 听 帧 变化 ， 使 得 在 正确 的 时 间 进 行 泻 染 
e 增加 响应 变化 的 时 间 间 隔 ， 减 少 重 绘 次 数 


GPU 加 速 


CSS 中 以 下 属性 (CSS3 transitions、CSS3 3D transforms, Opacity, Canvas, WebGL, Video) 来 触发 GPU 泻 染 ， 请 
使 用 , 过 渡 使 用 会 引发 手机 过 耗 电 增 加 


X MSN 
参考 $t 料 


e 移动 H5 前 端 性 能 优化 指南 
e BlendUl， 让 webapp 的 体验 和 交互 得 到 质 的 提升 
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浏览 器 泻 染 性 能 优化 


影响 性 能 的 因素 


e 白 屏 

o HTML 和 CSS 的 加 载 及 解析 速度 

o «head» 内 的 脚本 加 载 及 执行 
e EE 

o 图 片 加 载 

o <body> 内 的 脚本 加 载 及 执行 
e render tree 的 构建 

o HTML B9 4 

o CSS 的 复杂 度 
e render tree 的 绘制 ( 栅 格 化 ) 

o 颜色 的 复杂 度 

o 形状 的 复杂 度 


怎么 提高 前 端 性 能 ? 


提高 以 下 几 个 方面 ， 总 体 性 能 就 会 得 到 大 幅度 提升 : 


e 缩短 白 屏 时 间 ; 
e 加 快 首 屏 显 示 ; 
e 尽快 监听 主要 操作 的 事件 。 


优化 关键 呈现 路 径 
为 了 在 首次 泻 染 时 尽 可 能 快 ， 我 们 需要 优化 以 下 三 个 变量 : 


e. 最 小 化 关键 资源 数 
e 最 小 化 关键 字 节 数 
e. 最 小 化 关键 路 径 长 度 


常规 步骤 : 


e 分 析 并 描述 关键 路 径 : 资源 数 、 字 节 数 和 长 度 ; 

e 减少 关键 资源 的 数量 : 删 掉 、 延 迟 下 载 或 标记 为 异步 等 等 ; 

o 优化 剩余 关键 资源 的 加 载 顺 序 : 尽早 下 载 所 有 关键 资源 以 缩短 关键 路 径 长 度 ; 
e 优化 关键 字 节 数 以 减少 下 载 时 间 (往返 次 数 ) 。 


PageSpeed 规则 和 建议 


e 排除 阻止 呈现 的 JavaScript 和 CSS 
e 优化 JavaScript 的 用 法 
o 推荐 使 用 异步 JavaScript 资源 
o Avoid synchronous server calls 
o 延迟 解析 JavaScript 
o 避免 运行 时 间 长 的 JavaScript 
e 优化 CSS 的 用 法 
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o 将 CSS 放 到 文档 头 部 
o 避免 使 用 CSS import 
o 内 联 阻止 呈 现 的 CSS 


e MN 
参考 Tr 料 


e Google: Optimizing Performance 


浏览 器 演 染 性 能 优化 
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区 分 开发 与 部 署 环境 


前 端 这 一 块 ， 开 发 可 以 很 简单 的 在 本 地 建立 几 个 文件 ， 浏 览 器 就 能 运行 起 来 。 但 是 实际 部 署 的 情况 ， 需 要 进行 页 面 资源 优 
化 。 


缓存 的 使 用 


本 地 访问 的 时 候 ， 不 管 是 file 还 是 http 的 协议 ， 一 般 不 会 察觉 出 加 载 慢 得 情况 。 但 是 线 上 的 情况 却 很 复杂 ， 每 个 请 求 者 的 网 络 
环境 不 同 ， 那 么 导致 加 载 的 时 间 也 不 一 致 ， 为 了 性 能 以 及 带宽 。 我 们 会 选择 使 用 缓存 去 减少 一 些 请 求 ， 比 如 不 常 更 新 的 样式 
文件 。 


首先 开启 缓存 机 制 ， 需 要 强制 浏览 器 使 用 本 地 缓存 。 这 一 块 应 该 是 在 处 理 请 求 的 服务 器 上 义理 的 , 在 返回 的 http headers 中 标 
明 。 


启用 了 缓存 机 制 ， 同 样 的 请 求 默认 请 求 一 次 ， 以 后 刷新 请 求 的 都 是 本 地 缓存 资源 。 但 是 如 果 要 更 新 资源 ， 怎 么 办 ? 原先 我 这 
里 的 想法 是 ， 也 是 最 普遍 的 想法 就 是 追加 时 间 稚 。 使 得 请 求 路 径 发 生变 化 ， 这 样 就 会 让 浏览 器 主动 放弃 缓存 ， 加 载 新 的 资 
源 。 更 好 的 方法 ， 我 看 了 百度 FIS 的 做 法 ， 他 们 的 思路 是 让 url 与 文件 内 容 关 联 ， 使 用 的 是 数据 摘要 算法 ， 对 文件 求 摘 要 信 
息 ， 可 以 精确 到 单个 文件 的 缓存 控制 。 


普通 服务 器 与 CDN 的 使 用 


为 了 进一步 提高 网 站 性 能 ， 会 把 静态 资源 和 动态 网 页 分 别 存放 到 CDN 和 与 普通 服务 器 上 。 上 面 说 到 的 那些 缓存 文件 ， 其 实 
存放 在 CDN 上 面 的 ， 那 么 问题 来 了 : 部 署 的 时 候 如 何 蔡 换 ， 动 态 网 页 与 静态 资源 不 可 能 同时 进行 ， 如 果 错 开 更 新 ， 肯 定 会 有 
某 一 时 刻 访问 出 错 。 





答案 就 是 : 灰 度 发 布 。 用 文件 的 摘要 信息 来 对 资源 文件 进行 重 命名 ， 把 摘要 信息 放 到 资源 文件 发 布 路 径 中 ， 这 样 ， 内 容 有 修 
改 的 资源 就 变 成 了 一 个 新 的 文件 发 布 到 线 上 ， 不 会 覆盖 已 有 的 资源 文件 。 上 线 过 程 中 ， 先 全 量 部 署 静态 资源 ， 再 灰 度 部 署 页 
面 ， 整 个 问题 就 比较 完美 的 解决 了 。 


Rails 

rails 通 过 把 静态 资源 变 成 erb 模 板 文件 ， 然 后 加 入 <%= asset path 'image.png' %>， 上 线 前 预 编译 完成 处 理 。 
e. 知 乎 : 大 公司 里 怎样 开发 和 部 署 前 端 代码 ? 
e Blog: 前 端 农 民工 


e ABeginners Guide to HTTP Cache Headers 
e RailsGuides: The Asset Pipeline 
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优化 网 络 请 求 


如 何 加 快 网 速 把 ， 其 实 和 上 一 篇 应 该 有 些 地 方 重复 。 具 体 的 资源 ， 





优化 网 络 请 求 


见 assets 目录 。 
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页 面 提速 方法 
减少 对 服务 器 的 文件 请 求 


常规 的 HTTP 请 求 属于 "请求" 应答”-“ 断 开 " 形 式 的 短 连 接 ， 每 一 个 独立 的 资源 我 们 都 会 向 服务 器 发 去 一 份 get 请 求 ， 再 等 服务 
端 将 我 们 需要 的 文件 传 回来 。 每 一 次 资源 的 请 求 都 实 实在 在 地 耗费 了 一 次 "连接 -等 待 -接收 "的 时 间 GATA REhttpi Ki A keep- 
alive 长 连接 状态 可 以 减少 “连接 "的 次 数 和 时 间 ) ， 如 果 我 们 能 有 效 减 少 对 服务 器 文件 的 请 求 次 数 ， 便 意味 着 我 们 可 以 从 这 块 
省 下 一 些 页 面 等 待 时 间 ， 也 可 以 顺便 减少 服务 器 的 负担 。 





具体 的 方式 可 以 有 : 


e 使 用 css sprite 技 术 合并 多 个 图 片 为 单个 图 片 文 件 ， 实 际 使 用 时 通过 background-position 来 定位 背景 位 置 (相信 大 家 第 一 
个 想到 的 也 是 这 个 吧 ) 

e 合并 多 个 css 样 式 文件 为 单个 样式 文件 ， 合 并 多 个 脚本 为 单个 脚本 ， 再 在 页 面 中 引用 合并 后 的 样式 /脚本 文件 。 对 于 这 个 
你 可 以 使 用 rjs 来 帮忙 (看 我 这 篇 文章 ) ， 但 我 个 人 倒是 不 怎么 推荐 这 个 方法 ， 因 为 合并 了 文件 之 后 ， 多 个 页 面 之 间 公 共 
部 分 的 样式 /脚本 文件 就 无 法 缓存 到 客户 端 了 ; 

e 使 用 base64 编 码 来 展示 图 片 。 就 如 图 github 404 页 面 那样 。 常 规 只 推荐 你 把 这 种 方式 使 用 在 用 户 重复 访问 量 较 少 的 页 
面 ， 因 为 它们 虽然 无 须 从 服务 端 get 一 通 ， 但 也 无 法 缓存 在 客户 端 ， 导 致 用 户 每 次 访问 页 面 都 要 重新 泻 染 一 次 。 而 且 隐 长 
的 文件 流 代码 会 占用 你 页 面 很 大 的 代码 空间 ， 维 护 起 页 面 来 估计 也 会 挺 心 塞 ; 

e 将 小 块 的 css、js 代 码 段 直接 写 在 页 面 上 ， 而 非 在 页 面 引 入 独立 的 样式 /脚本 文件 。 相 信 有 的 朋友 看 惯 了 “保持 结构 ( 标 
ib) 、 表 现 (样式 ) 、 行 为 (BE) 三 者 分 离 " 的 规范 ， 对 此 观点 可 能 有 些 意见 。 只 能 说 规范 不 是 教条 ， 适 合 自己 的 才 
是 硬 道理 。 直 接 把 小 段 的 、 复 用 率 低 的 样式 /脚本 直接 写 于 页 面 上 带 来 的 利 还 是 大 于 弊 的 〈 弊 可 能 也 就 是 增 大 了 页 面 代 码 
量 、 不 那么 好 维护 了 点 ) 。 反 观 所 有 主流 门户 网 站 的 页 面 源 文 件 ， 基 本 没有 一 个 是 把 样式 /脚本 都 全 部 作为 外 部 文件 引入 
的 (无 论 他 们 是 否 从 减少 服务 器 请 求 这 点 出 发 ， 事 实 都 是 这 样 ) 

e 利用 http-equiv="expires” 元 标签 ， 设 定 一 个 未 来 的 某 时 间 点 作为 页 面 文件 过 期 时 间 ， 用 户 在 过 期 时 间 之 前 所 获取 到 的 页 
面 文件 都 仅 从 缓存 中 去 取 。 不 过 这 个 办 法 太 死 板 (有 时 候 即 使 服务 端 及 时 把 过 期 时 间 更 改 为 已 结束 时 间 ， 客 户 端 可 能 都 
不 会 按照 新 更 改 的 规则 去 服务 端 获取 新 文件 资源 ) ， 常 规 是 不 推荐 使 用 的 。 


减少 文件 大 小 


文件 太 大 (特别 是 图 片 ) 导致 加 载 时 间 较 长 ， 往 往 都 是 影响 页 面 加 载体 验 的 头号 大 敌 ， 那 么 尽 可 能 减少 请 求 文件 的 大 小 便 是 
相当 重要 的 事情 了 ， 我 们 可 以 做 的 事情 有 : 


e 压缩 样式 /脚本 文件 ， 就 此 你 可 以 使 用 gulp 或 者 grunt 来 实现 这 点 ， 它 们 均 能 很 好 地 减少 css/js 文 件 的 大 小 (对 于 js 还 能 起 
到 混淆 变量 、 画 数 名 的 作用 ) 

e 针对 性 选择 图 片 格 式 ， 在 无 透明 背景 需求 下 ， 对 于 颜色 较 单 一 、 无 色彩 渐变 的 图 片 仅 使 用 gif 格式 ， 对 于 jpg 图 片 也 可 按照 
其 清晰 度 要 求 ， 在 导出 jpg 的 时 候选 择 对 应 的 “品质 "进行 优化 。 如 果 你 喜欢 尝鲜 ， 可 以 学 淘宝 那样 使 用 webp 图 片 格 式 ， 它 
能 很 好 地 优化 同 画 质 下 的 文件 大 小 。 

e 使 用 Font Awesome 来 替代 页 面 上 的 图 标 ， 其 原理 是 使 用 @font-face 让 用 户 下 载 一 个 非常 小 的 UI 字体 包 ， 把 页 面 上 用 到 的 
图 标 以 字符 的 形式 来 显示 ， 从 而 减少 了 图 片 需 求 和 图 标 文件 大 小 。 


适度 使 用 CDN 





使 用 CDN 有 几 个 好 处 : 如 果 用 户 在 其 它 站 点 下 载 过 这 个 CDN 资 源 ， 那 么 来 我 们 站 点 仅仅 从 缓存 获取 即 可 ; 减少 了 对 自己 站 点 
服务 器 的 文件 请 求 〈 外 部 CDN 的 情况 下 ) ， 减 少 服务 器 负担 ; 多 个 域 会 使 浏览 器 允许 异步 下 载 资 源 的 最 大 数量 增多 ， 比 如 一 
个 站 点 只 从 一 个 域 来 请 求 资源 ， 那 么 FireFox 只 允许 同时 刻 最 多 异步 下 载 2 个 文件 ， 但 如 果 使 用 了 外 部 CDN 来 引入 资源 ， 那 么 
FF 人 允许 在 同时 异步 下 载 本 域 中 的 两 个 资源 外 ， 还 额外 人 允许 同时 异步 下 载 另 一 个 域 (CDN) 下 的 2 个 资源 。 


但 是 使 用 CDN 有 一 个 很 大 的 问题 一 一 增加 了 dns 解 析 的 开销 ， 如 果 一 个 页 面 同时 引入 了 多 个 CDN 的 资源 ， 可 能 会 因为 dns 解 析 
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而 陷入 较 多 的 等 待 时 间 ， 导 致 得 不 偿 失 。 


对 于 这 个 问题 ， 常 规 是 建议 一 个 站 点 下 只 使 用 同一 个 可 靠 、 快 速 的 CDN 来 引入 各 种 所 需 资源 即 可 ， 也 就 是 说 ， 建 议 一 个 页 面 
从 2 个 不 同 的 域 (比如 站 点 域 和 CDN 域 下 来 请 求 资源 是 最 佳 的 选择 (据说 这 个 结论 是 雅虎 前 端 工 程 病 提 出 的 ， 这 里 有 一 篇 
很 不 错 的 文章 ) 。 


延迟 请 求 、 异 步 加 载 脚本 


在 各 主流 浏览 器 下 ， 常 规 情 况 ， 我 们 的 脚本 文件 跟随 其 它 资源 文件 一 样 都 是 异步 下 载 的 ， 但 这 里 存在 一 个 问题 一 一 比如 
FireFox 下 载 好 脚本 后 的 一 小 段 时 间 内 会 有 "执行 阻塞 "的 情况 发 生 ， 也 就 是 说 浏览 器 下 载 好 脚本 后 执行 它 的 这 段 时 间 里 ， 浏 览 
器 的 其 它 行为 被 阻塞 ， 导 致 页 面 上 的 其 它 资源 都 是 无 法 被 请 求 和 下 载 的 





如 果 你 页 面 里 存在 js 代码 执行 时 间 过 长 的 情况 ， 那 么 用 户 就 会 明显 感觉 到 页 面 的 延 妈 。 解 决 这 个 问题 有 一 个 简单 的 方法 
将 脚本 请 求 标签 放置 到 结束 标签 前 ， 使 得 页 面 上 的 脚本 成 为 最 后 被 请 求 的 资源 ， 自 然 也 不 会 阻塞 其 它 页 面 资 源 的 请 求 事件 
机 





另外 ， 虽 然 上 面 提 到 "我 们 的 脚本 文件 跟随 其 它 资源 文件 一 样 都 是 异步 下 载 的 ”， 但 异步 下 载 不 代表 异步 执行 ， 为 了 严格 保证 
脚本 逻辑 顺序 和 依赖 关系 的 正确 性 ， 浏 览 器 会 按照 脚本 被 请 求 的 先后 顺序 来 执行 脚本 。 那 么 问题 就 来 了 一 一 如 果 页 面 上 的 脚 
本 依赖 关系 并 不 大 ， 其 至 没有 任何 相互 间 的 依赖 ， 那 么 浏览 器 的 这 套 规则 就 仅仅 增加 了 页 面 请 求 阻塞 时 间 而 已 〈 就 像 你 花 大 
钱 买 了 一 笔 保险 ， 但 被 保险 期 间 你 平安 无 事 哈 都 没 发 生 。。。 虽 ， 这 个 比 哈 有 点 反 人 类 。。。) 。 


解决 这 个 问题 的 办 法 无 非 就 是 让 脚本 无 阻塞 地 异步 执行 ， 比 如 给 Script 标签 加 上 defer 和 async 属 性 或 者 动态 注入 脚本 〈 可 以 参 
考 这 里 ) ， 但 这 些 都 不 是 良好 的 解决 方案 ， 要 么 存在 兼容 性 问题 ， 要 么 太 麻烦 还 无 法 处 理 依赖 。 


个 人 是 推荐 使 用 requireJS (AMD 规 范 ) 或 seaJS (CMD 规 范 ) 来 异步 加 载 脚本 并 处 理 模块 依赖 的 ， 前 者 将 “依赖 前 置 ”( 预 


加 载 所 有 被 依赖 脚本 模块 ， 执 行 速度 最 快 ) ， 后 者 走 的 “依赖 就 近 ”( 懒 加 载 被 依赖 脚本 模块 ， 请 求 脚本 更 科学 ) ， 你 可 以 根 
据 项 目 具体 需求 来 选择 最 合适 的 。 


延迟 请 求 首 屏 外 的 文件 


先 解 释 下 , “ 首 屏 " 指 的 是 页 面 初始 化 时 候 的 页 面 内 容 显示 区 域 ， 也 就 是 页 面 一 加 载 ， 用 户 就 首先 看 到 的 区 域 。 





比如 像 京东 啊 淘 宝 啊 ， 对 于 需要 滚动 页 面 才 能 看 到 的 图 片 内容 ， 都 做 了 类 似 lazyload 的 处 理 ， 这 些 无 非 都 是 走 了 代理 模式 的 
理念 ， 但 的 确 给 用 户 一 个 错觉 这 个 页 面 更 快 地 加 载 完 了 ， 因 为 我 很 快 就 看 到 了 屏幕 上 的 内 容 (即使 我 还 没 下拉 滚 动 条 ， 
而 页 面 后 方 的 文件 其 实 还 没 真 正 加 载 呢 ) 。 





我 们 可 以 这 样 实现 此 方案 ， 不 依赖 任 何 lazyload 库 ， 拿 图 片 来 做 示范 ， 我 们 可 以 这 样 编写 首 屏 外 的 图 片 假 设 某 张 图 片 地 址 
是 a.jpg) 的 img 标 签 : 


«img src-"data:image/png;base64,R01GODIhAQABAAD/ACWAAAAAAQABAAACADs-" data-src="a.jpg"> 


如 上 所 示 ， 页 面 初步 加 载 这 张 图 片 的 时 候 是 直接 以 base64 的 方式 〈 当 然 你 也 可 以 统一 使 用 一 张 占 位 图 loading.gif 来 奉 代 ) 来 
快速 显示 一 张 极 小 的 图 片 的 ， 而 图 片 本 身 的 真实 路 径 是 存在 data-src 属 性 内 的 ， 我 们 可 以 在 页 面 加 载 结 束 后 再 向 服务 器 请 求 
它 真 实 的 文件 并 替换 : 


function init() ( 
var imgDefer = document.getElementsByTagName( 'img'); 
for (var i-0; i«imgDefer.length; i++) { 
if(imgDefer[i].getAttribute('data-src')) { 
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src')); 
j 
} 
} 


window.onload = init; 
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如 上 是 对 图 片 的 延迟 加 载 处 理 ， 对 于 视频 、 音 频 文 件 ， 可 以 采取 完全 一 样 的 原理 来 延迟 加 载 ， 从 而 有 效 减少 页 面 初始 化 等 待 
时 间 。 


优化 页 面 模块 排放 顺序 


这 里 有 一 个 很 好 的 例子 ， 比 如 有 一 个 页 面 是 这 样 的 一 一 左边 是 侧 边 栏 ， 用 于 存放 用 户 的 头像 啊 、 资 料 啊 ， 以 及 网 站 投放 的 广 
告 啊 ， 而 右 侧 是 文章 内 容 区 域 : 


<body> 
«sidebar» 
«1-- 侧 边 栏 内 容 --> 
</sidebar> 


<content> 
<!-- 文章 内 容 --> 
</content> 
</body> 


于 是 乎 ， 浏 览 器 按照 它 的 Ul 单 线程 准则 从 上 到 下 先 加 载 了 侧 边栏 ， 再 加 载 我 们 的 文章 。。。 


很 明显 ， 这 样 不 是 一 个 人 性 化 的 加 载 顺 序 ， 我 们 得 弄 清楚 ， 页 面 上 各 个 区 域 模块 ， 对 于 用 户 而 言 ， 哪 个 才 是 最 重要 、 最 应 当 
首先 展示 的 。 


对 于 上 面 的 例子 ， 文 章 内 容 才 应 该 是 用 户 首先 要 看 到 、 需 要 浏览 器 优先 请 求 和 显示 的 区 域 。 所 以 我 们 得 修改 我 们 的 代码 为 : 


<body> 
<content> 
<!-- 文章 内 容 --> 
</content> 


<sidebar> 
<!-- 侧 边 栏 内 容 --> 
</sidebar> 
</body> 


当然 这 里 仅仅 是 用 一 个 小 示例 来 挑 起 各 位 的 脑 洞 ， 懂 得 举一反三 和 实际 运用 才 是 硬 道理 。 
ra EN 
其 它 建 议 


1. 不 要 在 css 中 使 用 @import， 它 会 让 一 个 样式 文件 去 等 待 另 一 个 样式 文件 的 请 求 ， 无 形 中 增加 了 页 面 等 待 时 间 (当然 如 果 
走 的 scss，@import 就 是 另 一 回 事 了 ， 听 跑题 了 ~) 
2. 避免 页 面 或 者 页 面 文件 重 定 向 查找 ， 这 相当 于 你 走 进 了 一 间 卫 生 间 ， 然 后 看 到 上 面 的 牌子 说 “此 多 不同， 请 去 前 面 左 拐 的 
TER”, XGEGE—B; 
3. 减少 无 效 请 求 一 -比如 通过 css/js 来 请 求 一 个 不 存在 的 资源 ， 可 能 会 导致 较 长 的 等 待 和 阻塞 (直到 它 返 回 错误 信息 ) 
4. 无 论 你 是 否决 定 将 脚本 放 到 页 尾 ， 但 一 定 要 保障 脚本 放置 于 祥 式 文件 后 方 ; 
5. 文件 在 小 于 50K 的 时 候 ， 直 接 读 取 文 件 流 会 比 从 文件 系统 中 去 读 取 文 件 来 的 快 些 ， 大 于 50K 则 相反 。 比 如 有 一 张 图 片 ， 如 
果 它 小 于 50K， 我 们 可 以 将 它 转 为 二 进 制 数据 存储 在 数据 库 中 ， 页 面 若 要 读 取 该 图 片 则 从 数据 库 上 来 读 取 ， 若 文件 大 小 
大 于 50K， 那 建议 存放 在 可 访问 的 文件 夹 中 以 文件 的 形式 来 读 取 即 可 ; 
. 使 用 cookie-free domains 来 存放 资源 ， 减 少 无 用 cookie 传 输 的 网 络 开 销 ( 可 以 参考 这 篇 文章 ) 
. 配置 .htaccess 文 件 、 走 Gzip 页 面 压缩 形式 、 开 启 keep-alive 连 接 模式 等 后 端 解决 方案 ， 这 边 就 不 细 说 了 。 


参考 资料 





NI OO 
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e 浅 谈 WEB 页 面 提速 (前 端 向 ) 

e Font Awesome 

e 探 真 无 阻塞 加 载 javascript 脚 本 技术 ， 我 们 会 发 现 很 多 意 想 不 到 的 秘密 
e 优 设 : 浓缩 的 精华 ! 从 需 开 始 带 你 认识 最 新 的 图 片 格式 WEBP 
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Chrome 开 发 者 工具 的 使 用 


s MS 
参考 $t 料 


e Chrome DevTools 

e Chrome 控制 台 不 完全 指南 

e Chrome 控 制 台 如 何 调试 Javascript 

e Chrome 控制 台 console 的 用 法 

e Chrome 开 发 者 工具 之 JavaScript 内 存 分 析 
e i£ :使 用 Chrome 开 发 工具 调试 Canvas 


Chrome 开 发 者 工具 的 使 用 
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JavaScript 内 存 优化 


v VAN 
参考 $t 料 


e Chrome 开 发 者 工具 之 JavaScript 内 存 分 析 
e 了 解 JavaScript 应 用 程序 中 的 内 存 泄漏 

e JavaScript 中 的 内 存 泄 露 模式 

e 案例 分 析 之 JavaScript 代 码 优 化 


JavaScript 内 存 优化 


192 
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javascript 事 件 优 化 


javascript 是 如 何 切入 到 html 和 和 css 中间， 让 三 者 融合 呢 ? 最 后 我 发 现 这 个 切入 点 就 是 javascript 的 事件 系统 ， 不 管 我 们 写 多 长 
多 复杂 的 javascript 代 码 ， 最 终 都 是 通过 事件 系统 体现 在 html 和 css 上 ， 因 此 我 就 在 想 既 然 事件 系统 是 三 者 融合 的 切入 点 ， 那 
么 一 个 页 面 里 ， 特 别 是 当今 越 来 越 复 杂 的 网 页 里 必然 会 有 大 量 事件 操作 ， 没 有 这 些 事件 我 们 精心 编写 的 javascript 代 码 只 有 思 
枪 入 库 ， 英 雄 无 用 武之 地 了 。 





HTML 4E x 38 


html 事 件 处 理 就 是 将 事件 函数 直接 写 在 html 标 签 里 ， 因 为 这 种 写法 和 html 标 签 紧 厢 合 ， 所 以 称 为 html 事 件 处 理 。 例 如 下 面 代 
码 : 


«input type="button" id-"btn" name="btn" onclick-"alert('Click Me!')"/» 
or 


«input type="button" id-"btn" name-"btn" onclick-"btnClk()"/» 
function btnClk(){ 


alert("click me!"); 


上 面 这 个 写法 是 一 种 很 美的 写法 ， 所 以 时 下 还 是 很 多 人 会 不 自觉 的 使 用 它 ， 但 是 也 许 很 多 人 不 知道 ， 后 一 种 写法 其 实 没有 前 
一 种 写法 健壮 ， 这 个 也 是 我 前 不 久 在 研究 非 阻塞 加 载 脚 本 技术 时 候 碰 到 的 问题 ， 因 为 根据 前 端 优 化 的 原则 ，javascript 代 码 往 
往 是 位 于 页 面 的 底部 ， 当 页 面 有 被 脚本 阻塞 时 候 ，html 标 签 里 引用 的 函数 可 能 还 没 执行 到 ， 这 个 时 候 我 们 点 击 页 面 按钮 ， 结 
果 会 报 出 "XXX 画 数 未 定义 的 错误 "， 在 javascript 里 这 样 的 错误 是 会 被 ty，catch 所 捕获 ， 因 此 为 了 让 代码 更 加 健壮 ， 我 们 会 有 
如 下 的 改写 : 


«input type="button" id="btn" name="btn" onclick="try{btnClk();}catch(e){}"/> 
但 是 这 是 一 种 极其 不 推荐 的 做 法 ! 耦合 性 太 强 ! 


DOM0 级 事件 义理 


DOM0 级 事件 处 理 是 当今 所 有 浏览 器 都 支持 的 事件 处 理 ， 不 存在 任何 兼容 性 问题 ， 看 到 这 样 一 句 话 都 会 让 每 个 做 web 前 端的 
人 们 激动 不 已 。DOM0 事 件 义理 的 规则 是 : 每 个 DOM 元 素 都 有 自己 的 事件 久 理 属性 ， 该 属性 可 以 赋值 一 个 函数 ， 例 如 下 面 的 
代码 : 








var btnDOM = document.getElementById("btn"); 
btnDOM.onclick = function()( 


alert("click me!"); 


DOM0 级 事件 处 理 的 事件 属性 都 是 采用 “on+ 事 件 名 称 "的 方式 定义 ， 整 个 属性 都 是 小 写字 母 。 这 个 事件 处 理 的 方式 只 能 绑 定 一 
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个 函数 ， 多 个 辑 数 的 话 ， 后 面 一 个 函数 会 将 之 前 的 函数 覆盖 。 


DOM2 事 件 人 处理 和 IE 事 件 人 处理 


DOM2 事 件 处 理 是 标准 化 的 事件 处 理 方案 ， 但 是 IE 浏 览 器 自己 搞 了 一 套 ， 功 能 和 DOM2 事 件 处 理 相 似 ， 但 是 代码 写 起 来 就 不 
太一 样 了 。DOM2 事 件 处 理 在 ie9 包 括 ie9 以 上 的 版 本 都 得 到 了 很 好 的 支持 ，ie8 以 下 是 不 支持 DOM2 事 件 的 。 旧 版 本 的 IE 使 用 
的 是 自 己 封装 的 一 套 attachEvent ,标准 的 是 使 用 addEventListener o 


事件 流 


在 页 面 开 发 里 我 们 常常 会 碰 到 这 样 的 情况 ， 一 个 页 面 的 工作 区 间 在 javascript 可 以 用 document 表 示 ， 页 面 里 有 个 div，div 等 于 
是 履 盖 在 document 元 素 上 ，div 里 面 有 个 button 元 素 ，button 元 素 是 覆盖 在 div 上 ， 也 等 于 覆盖 着 document 上 ， 所 以 问题 来 
了 ， 当 我 们 点 击 这 个 按钮 时 人 息 ， 这 个 点 击 行为 其 实 不 仅仅 发 生 在 button 之 上 ，divr 和 document 都 被 作用 了 点 击 操作 ， 按 逻辑 这 
三 个 元 素 都 是 可 以 促 发 点 击 事件 的 ， 而 事件 流 正 是 描述 上 述 场景 的 概念 ， 事 件 流 的 意思 是 : 从 页 面 接收 事件 的 顺序 。 


事件 冒 泡 和 事件 捕获 


e 事件 冒 泡 : 是 微软 公司 提出 解决 事件 流 问 题 的 方案 
e 事件 捕获 : 是 网 景 公司 提出 的 事件 流 解决 方案 


冒 泡 事件 由 div 开 始 ， 其 次 是 body， 最 后 是 document， 事 件 捕 获 则 是 倒 过 来 的 先是 document， 其 次 是 body， 最 后 是 目标 元 素 
div， 相 比 之 下 ， 微 软 公 司 的 方案 更 加 人 性 化 符合 人 们 的 操作 习惯 ， 网 景 的 方案 就 很 别扭 了 ， 这 是 浏览 器 大 战 的 恶果 。 


attachEvent 


微软 为 自己 的 事件 方式 选择 了 一 套 做 法 : attachEvent ,在 ie 下 通过 DOM 元 素 的 attachEvent 方 法 添加 事件 ， 和 DOMO 事 件 处 理 
相 比 ， 添 加 事件 的 方式 由 属性 变 成 了 方法 ， 所 以 我 们 添加 事件 就 需要 往 方法 里 传递 参数 ，attachEvent 方 法 接收 两 个 参数 ， 第 
一 个 参数 是 事件 类 型 ， 事 件 类 型 的 命名 和 DOM0 事 件 饼 理 里 的 事件 命名 一 样 ， 第 二 个 参数 是 事件 范 数 了 ， 使 用 方法 的 好 义 就 
是 如 果 我 们 在 为 同一 个 元 素 添加 个 点 击 事件 。 





但 是 需要 注意 的 是 删除 事件 的 时 候 ， 如 果 绑 定 传 入 的 是 匿名 函数 ， 是 无 法 被 清除 干净 的 。 因 此 写 事 件 要 有 个 良好 的 习惯 即 操 
作画 数 要 独立 定义 ， 不 要 用 匿名 函数 用 成 了 习惯 。 





addEventListener 


DOM2 是 标准 化 的 事件 ， 使 用 DOM2 事 件 ， 事 件 传递 首先 从 捕获 方式 开始 即 从 document 开 始 ， 再 到 body，div 是 一 个 中 介 
点 ， 事 件 到 了 中 介 点 时 候 事件 就 处 于 目标 阶段 ， 事 件 进入 目标 阶段 后 事件 就 开始 冒 泡 义理 方式 ， 最 后 事件 在 document 上 结 
束 。 (捕获 事件 的 起 点 以 及 冒 泡 事件 的 终点 ， 我 本 文 都 是 指向 document， 实 际 情况 是 有 些 浏览 器 会 从 window 开 始 捕 获 ， 
window 结 束 冒 泡 ， 不 过 我 觉得 开发 时 候 不 管 浏览 器 本 身 怎么 设 定 ， 我 们 关注 document 更 具 开 发 意义 ， 所 以 我 这 里 一 律 都 是 
使 用 document) 。 人 们 习惯 把 目标 阶段 轨 为 冒 泡 的 一 部 分 ， 这 主要 是 因为 开发 里 冒 泡 事件 使 用 的 更 加 广泛 。 














DOM2 事 件 处 理 里 添加 事件 使 用 的 是 addEventListener， 它 接收 三 个 参数 比 ie 事件 义理 多 一 个 ， 前 两 个 的 意思 和 ie 事件 处 理 方 
法 的 两 个 参数 一 样 ， 唯 一 的 区 别 就 是 第 一 个 参数 里 要 去 掉 on 这 个 前 级 ， 第 三 个 参数 是 个 布尔 值 ， 默 认为 false。 如 果 它 的 取 值 
是 true， 那 么 事件 就 按照 捕获 方式 处理， 取 值 为 false， 事 件 就 是 按照 冒 泡 人 处理， 有 第 三 个 参数 我 们 可 以 理解 为 什么 DOM2 事 
件 义理 里 要 把 事件 元 素 跑 个 两 逼 ， 目 的 就 是 为 了 兼容 两 种 事件 模型 ， 不 过 这 里 要 请 注意 下 ， 不 管 我 们 选择 是 捕获 还 是 冒 泡 ， 

两 通通 万 是 永远 进行 ， 如 果 我 们 选择 一 种 事件 处 理 方式 ， 那 么 另外 一 个 事件 处 理 流 程 里 就 不 会 促 发 任何 事件 饼 理 画 数 ， 这 和 
汽车 挂 空挡 空转 的 道理 一 样 。 通 过 DOM2 事 件 方法 的 设计 ， 我 们 知道 DOM2 事 件 在 运行 时 候 只 能 执行 两 种 事件 处 理 方式 中 的 
一 种 ， 不 可 能 两 个 事件 流体 系 同 时 促 发 ， 所 以 虽然 元 素 通 万 两 逼 ， 但 是 事件 画 数 绝 不 可 能 被 促 发 两 带 。 


三 种 方式 的 比较 


HTML 事 件 处 理 是 绝对 不 推荐 的 方式 ，DOMO0 事 件 一 个 DOM 元 素 某 个 事件 有 且 只 有 一 次 ，DOM2 事 件 可 以 让 DOM 元 素 某 个 事 
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件 拥有 多 个 事件 处 理 函 数 ， 且 能 让 我 们 精确 控制 事件 流 的 方式 。 
A ` 

性 能 优化 

两 个 着 力 点 来 思考 事件 系统 的 性 能 问题 ， 它 们 分 别 是 


e ADERÉ 
e 内 存 消耗 


通 历 次 数 


不 管 是 捕获 事件 流 还 是 冒 泡 事件 流 ， 都 会 通 历 元 素 ， 而 是 都 是 从 最 上 层 的 window 或 document 开 始 的 通 历 ， 假 如 页 面 DOM 元 
素 父 子 关 系 很 深 ， 那 么 通 历 的 元 素 越 多 ， 像 DOM2 事 件 处 理 这 种 ， 通 历 危 害 程度 就 越 大 了 ， 如 何 解决 这 个 事件 流通 万 问题 

了 ?我 的 回答 是 没有 ， 这 里 有 些 朋 友 也 许 会 有 疑问 ， 人 怎么 会 没有 了 ? 事件 系统 里 有 个 事件 对 象 即 event， 这 个 对 象 有 阻止 冒 泡 
或 捕获 事件 的 方法 ， 我 怎么 说 没有 呢 ? 这 位 朋友 的 疑问 很 有 道理 ， a ooo 那么 我 们 代码 就 要 
义理 父子 元 素 的 关系 ， 和 分 孙 元 素 关 系 ， 如 果 页 面 元 素 嫉 套 很 多 ， 这 就 是 没 法 完成 的 任务 ， 所 以 我 的 回答 是 没 法 改变 通 历 的 问 
题 ， 只 能 去 适应 它 。 


内 存 消耗 


在 javascript 里 ， 每 个 函数 都 是 一 个 对 象 ， 每 个 对 象 都 会 耗 炎 内 存 。 在 当今 ajax 流行 ， 单 页 面 开 发 疯狂 普及 的 时 代 ， 一 个 网 页 
上 的 事件 都 是 超级 多 的 ， 这 就 意味 我 们 每 个 事件 都 有 一 个 事件 函数 ， 但 是 我 们 每 次 操作 都 只 会 促 发 一 个 事件 ， 此 时 其 他 事件 
都 是 身 着 睡觉 ， 起 不 到 任何 作用 同时 还 要 消耗 计算 机 的 内 存 。 


在 讲述 DOM2 事 件 义理 里 我 提 到 了 目标 对 象 这 个 概念 ， 抛 开 DOM2 事 件 处 理 方式 ， 在 捕获 事件 处 理 和 冒 泡 事件 处 理 里 也 有 目 
标 对 象 的 概念 ， 目 标 对 象 就 是 事件 具体 操作 的 DOM 元 素 ， 例 如 点 击 按钮 操作 里 按钮 就 是 目标 对 象 ， 不 管 哪个 事件 处 理 方式 ， 
事件 函数 都 会 包含 一 个 event 对 象 ，event 对 象 有 个 属性 target，target 是 永远 指向 目标 对 象 的 ，event 对 象 还 有 个 属性 就 是 
currentTarget，currentTarget 指 向 的 是 捕获 或 冒 泡 事件 流动 到 的 DOM 元 素 。 





假如 我 们 在 document 上 添加 点 击 事件 ， 页 面 上 的 按钮 不 添加 点 击 事件 ， 这 时 候 我 们 点 击 按钮 ， 我 们 知道 document 上 的 点 击 
事件 会 促 发 ， 这 里 有 个 细节 就 是 促 发 document 点 击 事件 时 候 ，event 的 target 的 指向 是 button 而 不 是 document。 


事件 委托 


使 用 事件 委托 时 可 以 避免 问题 的 发 生 ， 例 如 将 事件 绑 定 在 document，document 代 表 整 个 页 面 ， 所 以 它 加 载 完 毕 的 时 间 可 谓 
最 早 ， 所 以 在 document 上 实现 事件 委托 ， 就 很 难 发 生 事件 无 效 的 情 也 很 难 发 生 浏览 Eso POOL E. 3L "EA je] 8 T o 
总 结 一 下 这 个 特点 : 事件 委托 代码 可 以 运行 在 页 面 加 载 的 任何 阶段 ， 这 点 对 提升 网 页 性 能 还 是 增强 网 页 效果 上 都 会 给 开发 人 
员 提 供 更 大 自由 度 。 


e 关于 编写 性 能 高 效 的 javascript 事 件 的 技术 


javascript 事 件 优 化 195 





前 端 工程 病 手 册 





页 面 滚动 性 能 


X VAN 
参考 $r 料 


e NT 页 面 泻 染 
e HR 动 性 能 


e Moa P 页 面 滚动 时 候 的 绘制 性 能 ? 


页 面 滚动 性 能 196 
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web 开 发 中 的 坑 


开 这 一 章节 ， 记 录 一 下 自己 开发 过 程 中 遇 到 的 问题 ， 都 是 些 通 用 的 问题 ， 作 为 经 验 总 结 。 


web 开 发 中 的 坑 or 技 巧 


197 
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排版 兼容 性 问题 


IE 下 的 问题 


IE8 


不 支持 css3 属 性 ， 特 别 是 背景 图 片 size,position, 对 于 圆 角 可 使 用 PIE.js 

无 法 使 用 media query, 通过 插件 完成 

«meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 强制 |[E8 使 用 最 新 的 内 核 泻 染 页 面 
不 支持 图 片 opacity, 但 是 可 以 设置 滤 镜 完 

max-widthZE RE TF 8 js] 2f 


IE9 


canvas 的 height 不 能 设置 为 auto, 要 么 固定 ， 要 么 动态 计算 赋值 ,建议 使 用 mg 替代 canvas 


Firefox 


e 图 片 动画 抖动 ， 添 加 translate3d(0,0,0) 


Chrome 


通 


用 


e 如 何 解决 inline-block 元 素 的 空白 间距 
参考 资料 


e 前 端 兼容 性 不 完全 指南 


THTML5,CSS3」 viewport 兼容 性 问题 


e 网 页 布局 中 的 常见 的 兼容 性 问题 





排版 兼容 性 问题 
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浏览 硬 报 错 


记录 下 遇 到 的 浏览 器 报错 。 


浏览 器 报错 
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iPad 的 bug 合 集 


—— 


ipad 上 滚动 条 ， 在 滚动 过 程 之 中 ， 无 法 捕获 滚动 高 度 ? 


双 指 滑动 的 过 程 之 中 ，js 不 会 被 触发 。 除 非 全 部 接管 touch 事 件 ， 比 如 使 用 skrollr, 





e How can I monitor scroll position while scrolling in Safari on iOS? 
e Get scrollTop() while scrolling on iPad/iPhone 


fixed 布 局 元 素 宽 度 在 旋转 的 时 候 会 有 计算 问题 


总 体 来 说 ， 在 safari 下 尽量 少 使 用 fixed 布 局 。 


o a 
参考 Tr 料 


iPad 的 bug 合 集 
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localStorage 的 使 用 


这 是 一 个 HTML5 提 供 的 本 地 存储 方案 ， 它 会 在 本 地 存储 一 个 key,value 的 对 象 。 

添加 标识 

如 果 需 要 使 用 localStorage 存 储 数据 的 话 ， 主 要 为 每 个 值 添 加 唯一 的 标识 。 不 然 很 容易 读 取 到 其 他 程序 存储 的 内 容 。 
隐私 模式 下 注意 点 


PC 端 ,这 两 个 API 在 低 版 本 的 IE 下 是 没有 ,所 以 是 需要 用 try..catch 包 囊 的 . 


在 移动 端 ,我 刚刚 开始 是 不 加 的 ,所 测试 的 手机 也 没 问题 .但 是 现在 很 多 浏览 器 有 无 痕 模 式 ,这 个 模式 下 ,localStorage 相 关 的 API 时 
禁用 的 .所 以 使 用 时 ,还 是 要 保证 代码 的 健壮 性 ， 添加 一 个 polyfill. 





// 解决 隐私 模式 下 localStorage 不 正常 问题 
;(function() ( 
var KEY = ' localStorage ' 
PRVABUESSSUtOS t 





// 检测 是 否 正常 
try ( 

localStorage.setItem(KEY, VALUE); 
} catch(e) { 

var noop = function() {}; 


localStorage. proto = { 
setItem: noop, 
getItem: noop, 
removeItem: noop, 
clear: noop 
YN 
y 


// 删除 测试 数据 
if(localStorage.getItem(KEY) === VALUE) localStorage.removeItem(KEY); 
30; 


ios7 下 另 一 个 问题 


上 面 的 这 段 代 码 ， 有 一 个 严重 的 隐患 ， 就 是 在 原型 的 _proto_ ”属性 上 添加 未 西 ， 这 一 点 不 是 所 有 浏览 器 都 支持 的 ， 所 以 我 
在 ios7 下 会 得 到 报错 。 


解决 方案 : 建议 使 用 其 他 命名 替代 localstorage 或 者 针对 localstorage 部 分 使 用 try,catch 包 装 。 
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移动 端 fixed 布 局 


在 移动 开发 的 过 程 中 ， 元 素 使 用 fixed 布 局 在 safari 下 经 常会 遇 到 问题 ， 比 如 : 


e ios6 下 ， 不 国定 ， 滑 动 会 突然 跳动 

e RETEA HRE, TRER AEA 

e fixed 的 元 素 宽度 不 能 自 适 应 ， 在 ios6 下 横竖 屏 切 换 的 过 程 中 
e iframe 下 ，fixed 元 素 高 度 超大 


会 E VAN 
^N N 
参考 资料 


e 移动 Web 开 发 ，4 行 代码 检测 浏览 器 是 否 支持 position:fixed 
e 移动 端 web 页 面 使 用 position:fixed 问 题 总 结 
e 移动 Web 开 发 实践 一 一 解决 position:fixed 自 适应 BUG 


移动 端 fixed 布 局 
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touch 事 件 


移动 开发 过 程 之 中 ， 涉 及 到 touch 事 件 的 情况 特别 多 ， 比 如 按 下 ， 按 起 ， 滑 动 。 这 些 事件 在 不 同 的 设备 之 中 存在 差异 。 


组 件 


之 前 的 滑动 处 理 我 都 是 自己 去 写 的 ， 没 有 使 用 第 三 方 的 组 件 。 看 了 一 篇 文章 介绍 ， 提 到 了 三 个 组 件 : 
e hammer.js 


e zepto 
e appframework 


appframework 自 己 说 是 对 zepto 的 touch 进 行 了 修改 和 提升 。 


事件 顺序 


没有 touch 的 时 候 : mousedown -> mouseup -> click。 
有 touch 的 时 候 : touchstart -> touchmove -> touchend。 
都 有 的 时 候 : 


e 点 击 操作 : touchstart -> touchend -> mousedown -> mouseup -> click 
e 移动 的 时 候 : touchstart -> touchmove -> touchend 


DI 


安 卓 设 备 下 swipe 很 难 触发 


这 是 安 卓 的 一 个 老 问 题 了 .谷歌 一 下 类 似 zepto android swipe 的 关键 字 , 就 能 发 现 不 少 .很 多 项 目 中 的 issue 都 能 找到 这 个 问题 ， 
连 安 卓 自身 项 目 里 都 有 相关 issue( 链 接 要 翻 墙 )。 


解决 方法 就 是 在 touchstart 或 touchmove 事 件 中 ,主动 调用 e.preventDefault()。 
滑动 方向 的 问题 


以 上 下 滑动 为 主 的 操作 ,有 可 能 触发 swipeLeft/Right 事 件 ,而 不 是 swipeUp/Down 事 件 .这 个 主要 是 因为 native scroll 的 一 些 特性 ， 
导致 算 距 离 时 坚 向 的 距离 可 能 会 很 小 ,而 上 下 滑 的 最 后 ,一 般 会 有 一 个 横向 滑动 的 连带 动作 ,导致 deltaX>deltaY, 从 而 判断 出 错 . 


最 后 说 一 下 ,还 是 愤 用 左右 滑动 的 设计 ,一 是 兼容 性 问题 .二 是 , 微 信 等 app 是 手机 网 页 主要 的 入口, 而 从 左 向 右 的 滑动 ,很 容易 关闭 


e 记 mobile web 便 经 的 踩 过 坑 
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触 措 和 最 标 在 一 起 


间 2 I 


近 三 十 年 ， 桌 面 计算 体验 集中 围绕 在 一 个 键盘 与 一 个 鼠标 或 轨迹 板 ， 以 它们 作为 主要 的 用 户 输 入 设备 。 不 过 在 过 去 十 年 间 ， 
智能 手机 和 平板 电脑 带 来 了 一 个 新 的 交互 范式 : 触摸 。 通 过 引入 触 屏 的 Windows 8 机 器 ， 以 及 现今 很 酷 的 触摸 式 
Chromebook Pixel 笔 记 本 的 发 布 ， 触 摸 现 已 成 为 桌面 体验 的 部 分 预期 。 最 大 的 挑战 之 一 是 创造 出 不 仅仅 工作 于 触摸 设备 和 思 
标 设备 的 体验 ， 还 要 创造 出 用 户 同 时 使 用 这 两 种 输入 方法 的 体验 一 一 有 时 候 是 同时 的 ! 





这 篇 文章 将 帮助 你 理解 触摸 功能 是 如 何 内置 于 浏览 器 的 ， 怎 样 将 这 种 新 的 界面 机 制 集成 到 你 已 有 的 应 用 ， 以 及 触摸 怎样 于 可 
EU sse di AU E Cg 


Web 平 台中 的 触摸 状态 


iPhone 是 第 一 个 在 web 浏 览 器 中 植 入 了 专用 于 触摸 的 API 的 流行 平台 。 有 些 其 它 的 浏览 器 制造 方 创建 了 类 似 的 API 接 口 ， 植 入 
浏览 器 并 与 iOS 的 实现 兼容 ， 现 在 被 描述 为 "触摸 事件 版 本 1 规范。 触摸 事件 在 桌面 环境 被 Chrome 和 Firefox 支 持 ， 在 iOS 环 境 
被 Safari 支 持 ， 在 Android 环 境 被 Android 浏 览 器 支持 ， 还 有 其 它 的 移动 浏览 器 比如 Blackberry 浏 览 器 。 


我 的 同事 Boris Smus 写 了 一 篇 关于 触摸 事件 的 HTML5Rocks 教 程 ， 如 果 你 以 前 没有 看 过 触摸 事件 ， 这 仍然 是 一 个 很 好 的 开 
台 。 事实 上 ， 如 果 你 以 前 没有 处 理 过 触摸 事件 ， 在 你 继续 以 前 ， 现 在 就 去 阅读 那 篇 文章 吧 。 你 去 吧 ， 我 等 着 。 


结束 了 ? 现在 你 对 触摸 事件 有 了 一 些 基 础 知识 ， 写 一 个 可 触摸 的 交互 的 挑战 在 于 ， 触 摸 交 互 与 鼠标 〈 以 及 仿真 鼠标 的 轨迹 板 
和 轨迹 球 ) 事件 极为 不 同一 一 虽然 典型 的 触摸 接口 试图 在 模仿 鼠标 ， 但 这 种 模仿 并 不 完美 或 者 说 完整 ; 你 确实 需要 义理 这 两 
种 交互 模式 ， 而 且 可 能 会 不 得 不 单独 的 支持 每 一 个 接口 。 


用 户 或 许 有 触 屏 和 一 个 鼠标 


许多 开发 人 员 创建 的 网 站 会 静态 的 检测 环境 是 否 支 持 触摸 事件 ， 之 后 再 假设 他 们 只 需 支持 触摸 〈 不 需要 支持 鼠标 ) 事件 。 现 
在 这 是 一 个 错误 的 假设 一 一 相反 的 ， 仅 仅 因为 触摸 事件 的 存在 并 不 意味 着 用 户主 要 使 用 的 就 是 触摸 输入 设备 。 像 
Chromebook Pixel 笔 记 本 之 类 的 设备 以 及 一 些 Windows 8 便携 电脑 现在 已 经 可 以 同时 支持 鼠标 与 触摸 式 输 入 方法 ， 在 不 久 的 
未 来 还 会 有 更 多 。 在 这 些 设 备 中 ， 用 户 同时 使 用 鼠标 和 触 屏 与 应 用 交互 是 很 自然 的 事情 ， 所 以 “支持 触 屏 " 并 不 等 于 “不 需要 支 
持 鼠 标 "。 你 不 能 将 这 个 问题 想 成 我 需要 写 两 种 不 同 的 交互 方式 并 且 在 它们 之 间 切 换 ”， 你 要 想 清 楚 这 两 种 交互 怎样 独立 的 工 
作 ， 也 要 想 清楚 怎样 让 它们 协同 工作 。 在 我 的 Chromebook Pixel 笔 记 本 上 ， 我 经 常 使 用 轨迹 板 ， 但 也 会 伸手 触摸 屏幕 一 -在 
同一 个 应 用 或 页 面 中 ， 当 时 怎么 感觉 自然 我 就 怎么 做 。 从 另 一 方面 来 说 ， 有 些 触 屏 的 便携 式 电脑 用 户 几 乎 从 不 使 用 触 屏 一 一 
因此 触摸 输入 的 存在 不 应 该 禁止 或 者 隐藏 鼠标 控制 。 











不 幸 的 是 , 很 难 知道 用 户 的 浏览 器 环境 是 否 支 持 触 摸 输入 ,理想 情况 下 ,台式 机 上 的 浏览 器 应 该 显示 对 触摸 事件 的 支持 ， 这 样 就 
可 以 随时 安装 触摸 屏 显示 器 (例如 : 通过 KVM 连 接触 摸 屏 是 否 可 行 ) . 基于 所 有 这 些 原因 ， 您 的 应 用 不 应 该 尝试 在 触摸 和 筷 
标 之 间 切 换 -- 只 需要 两 种 方式 都 支持 . 


指针 事件 


在 Windows8 系 统 的 IE10 浏 览 器 中 . 微软 引入 了 一 种 叫做 指针 事件 的 心 的 模型 .指针 事件 是 鼠标 事件 和 触摸 输入 事件 ， 还 有 其 他 
输入 方式 比如 笔 输入 的 联合 . 将 指针 事件 模型 提交 到 W3C 标 准 还 有 很 多 工作 要 做 ,在 短 时 间 内 , 已 经 有 像 PointerEvents 和 
Hand.js 这 样 的 类 库 供 你 在 代码 中 实现 指针 事件 ， 从 而 避免 为 鼠标 和 触摸 分 别提 供 支 持 . 为 了 更 好 的 触 措 和 筷 标 交互 ,你 可 能 需 
要 为 鼠标 和 触摸 事件 分 别 自 定义 用 户 体验 ,但 在 很 多 情况 下 ,统一 事件 处 理 都 简化 了 这 样 的 过 程 . 然而 ,这 种 模型 还 面临 着 巨大 的 
挑战 , 它 需 要 支持 宛 余 的 输入 模型 ,也 还 没有 被 广泛 支持 ,而 且 还 需要 很 多 事件 来 将 它 变 成 一 个 稳定 的 , 跨 浏 览 器 的 标准 . 
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与 此 同时 ,最 好 的 建议 是 同时 支持 鼠标 和 触摸 交互 模型 .同时 支持 触摸 和 鼠标 事件 还 面临 着 很 多 挑战 ,所 以 这 篇 文章 对 这 些 挑战 
以 及 克服 这 些 挑战 的 策略 进行 了 分 析 。 另 外 ,有 些 建议 只 是 一 般 的 “实现 触摸 "的 建议 ,所 以 ， 如 果 你 已 经 熟悉 了 在 移动 环境 中 实 
现 触 摸 ,这 可 能 是 多 余 的 . 


同时 支持 鼠标 和 触 屏 


点 击 和 轻 拍 -“ 自 然 的 ”事物 的 顺序 


第 一 个 问题 是 传统 的 触摸 界面 技术 想 要 模仿 饥 标 的 点 击 -很 显然 ， 在 触 屏 技术 应 用 到 应 用 程序 之 前 ， 是 仅仅 只 能 和 妃 标 事件 进 
行 交 互 的 。 你 可 以 把 这 个 作为 一 个 快捷 键 使 用 -因为 "点击" 事件 将 会 继续 被 淘汰 ， 无 论 用 户 是 用 鼠标 点 击 还 是 用 手指 轻 敲 屏 
幕 。 然 而 ， 这 个 快捷 方式 还 有 一 些 问 题 。 





首先 ， 你 在 设计 先进 的 触 屏 交互 技术 的 时 候 必须 要 很 仔细 。 : 当 用 户 使 用 鼠标 ， 它 就 会 通过 点 击 事件 给 出 应 答 ， 但 是 当 用 户 
触摸 屏幕 的 时 候 ， 鲁 摸 和 点 击 事件 都 会 发 生 。 对 于 一 个 简单 的 点 击 事件 ， 其 顺序 是 : 


. 触 屏 开始 
触 屏 移动 
触 屏 结束 
S& pr ER 
鼠标 移动 
E LIONS 
. Bum sti 
md 


ouogscowm.meb 





MR, m BERDBAGRBUIRÓ4RIETEAAMISÉRBITRQE, LORD SLÉRBETPRR, MRA EIRA EID RS HB US BESTE FARRE 
击 事件 。 如 果 你 能 取消 这 个 触 屏 事件 (在 事件 处 理 程序 中 访问 perventDefault() 方 法 ) |, $AI& CE S ZB RR RA r ERE DHL. 
其 中 触摸 义理 程序 最 重要 的 一 个 规则 是 : 使 用 事件 义理 程序 中 的 perventDefault() 方 法 ， 所 以 默认 的 鼠标 仿真 处 理 就 不 会 发 
生 。. 


然而 ， 这 样 也 限制 了 其 他 默认 浏览 器 的 的 行为 ( 像 scrolling) -虽然 通常 你 在 你 的 义理 程序 中 完全 的 义理 触 屏 事件 ， 并 且 你 想 
要 禁止 默认 的 行为 。 一 般 来 说 ， 你 要 么 去 处 理 和 取消 所 有 触 屏 事件 ， 要 么 避免 有 一 个 对 应 这 个 事件 的 处 理 程序 。 





其 次 ， 当 用 户 在 移动 设备 上 触摸 一 个 网 页 上 的 某 个 元 素 时 ， 相 对 于 鼠标 事件 (mousedown) 处 理 ， 那 些 没有 为 移动 设备 交互 做 


个 延迟 效果 。 或 者 ， 也 可 以 使 用 Chrome， 打 开 Chrome 开 发 者 工具 中 打开 "Emulate touch events"， 可 以 帮助 你 在 非 触 控 系 
统 上 测试 触 控 接口 。 


这 个 延迟 是 用 来 给 浏览 器 判定 用 户 是 否 在 采用 其 他 的 手势 操作 ， 特 别 是 双 点 缩放 。 很 明显 ， 这 个 延迟 在 需要 对 手指 点 击 做 出 
瞬时 相应 时 会 引起 问题 。 已 经 有 个 正在 进行 中 的 工作 尝试 对 这 些 会 由 于 延迟 而 引起 问题 的 场景 做 出 限制 。 


鼠标 移动 事件 不 是 通过 触摸 实现 的 


在 这 一 点 上 ,非常 值得 注意 的 是 ,通过 触摸 接口 对 于 鼠标 事件 的 仿真 通常 并 不 扩展 到 优 真 鼠 标 移动 事件 ,所 以 如 果 你 创建 了 一 个 
使 用 鼠标 移动 事件 的 鼠标 驱动 控制 , 它 可 能 不 会 再 可 触摸 设备 上 很 好 的 工作 ,除非 你 也 明确 的 为 其 添加 触摸 移动 事件 的 义理 程 
序 . 


浏览 器 在 Html 控 制 上 通常 会 自动 实现 对 于 触摸 交互 的 适当 响应 - 所 以 ,比如 ,Html5Range 控 制 只 会 在 你 使 用 触摸 交互 的 时 候 起 
作用 . 然而 ,如 果 你 已 经 实现 了 自己 的 控制 ,它们 可 能 不 会 响应 点 击 拖 动 类 型 的 交互 ;实际 上 ,一 些 通 用 的 类 库 (比如 jQueryUI) 还 没 
有 像 这 样 实现 本 地 化 的 支持 触摸 交互 (尽管 jQueryUlI 提 供 了 像 “ 猴 子 补 丁 "一 样 的 修补 来 解决 这 个 问题 ). 这 是 我 在 升级 我 的 

Web Audio Playgroud 应 用 来 支持 触摸 事件 时 遇 到 的 第 一 个 问题 - 滑动 条 是 基于 jQueryUI 的 ,所 以 它们 不 支持 点 击 拖 动 交互 . 我 
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我 鲁 经 见 过 一 些 开发 者 陷入 的 一 个 误区 就 是 : 让 触摸 移动 和 九 标 移动 的 处 理 器 调用 相同 的 代 码 . 这 些 事件 的 行为 非常 相近 ,但 
存在 细微 的 不 同 - 特别 是 , 触摸 事件 总 是 以 触摸 发 生 时 所 在 的 元 素 为 目标 ， 然 而 鼠标 事件 则 以 当前 位 于 鼠标 指针 下 方 的 元 素 为 
目标 . 这 就 是 为 什么 我 们 有 妃 标 移 上 和 鼠标 移出 事件 ， 却 没有 响应 的 触摸 移 上 和 人 触摸 移出 事件 ,只 有 触摸 事件 . 


对 此 最 常见 的 刺 痛 你 的 方式 就 是 如 果 你 碰巧 移 除 (或 者 重新 定位 ) 某 个 用 户 刚 开 始 触 摸 的 元 素 . 比如 ,假设 一 个 图 像 切换 模块 
中 有 一 个 触摸 处 理 器 来 支持 特定 的 滚动 行为 . 随 着 现 有 图 片 的 变更 ,你 移 除 了 一 些 元 素 ， 并 添加 了 新 的 元 素 .如 果 用 户 碰巧 开始 
触摸 在 其 中 的 一 张 图 片上 ,然后 你 又 移 除 了 它 ， 你 的 处 理 器 (作用 于 图 片 元 素 的 祖先 元 素 ) 将 停止 接收 触摸 事件 (因为 它们 被 
分 配 到 了 一 个 当前 DOM 树 中 不 存在 的 目标 上 ) -那么 看 起 来 将 是 用 户 正 把 手指 放 在 一 个 位 置 ， 尽 管 这 个 位 置 的 元 素 已 经 移动 
了 并 且 最 后 被 移 除了 . 





当然 ， 你 可 以 通过 避免 移 除 触摸 事件 开始 时 已 经 绑 定 触摸 处 理 器 的 元 素 (或 者 祖先 元 素 已 经 绑 定 处 理 器 的 元 素 ) . 或 者 ,最 好 
的 方式 是 先 不 注册 touchend 或 者 touchmove 人 处 理 器 ， 一 直 等 到 获得 了 touchstart 事 件 ， 然 后 为 touchstart 事 件 的 目标 元 素 添加 
touchmove/touchend/touchcancel 处 理 器 (然后 在 end/cancel 事 件 发 生 时 移 除 这 些 处 理 器 ) .这 样 你 就 可 以 一 直接 收 触 摸 事 
件 ， 即 使 目标 元 素 移动 了 或 者 被 移 除 了 .你 可 以 在 这 里 尝试 -触摸 红色 的 方 框 然后 点 击 将 它 从 DOM 中 移 除 . 


触摸 和 :Hover 


鼠标 指针 把 光标 位 置 和 动态 选择 区 分 开 来 ,这 使 得 开发 者 可 以 使 用 " 移 上 "状态 来 隐藏 和 显示 跟 用 户 相 关 的 信息 .然而 ， 很 多 触摸 
接口 当前 都 不 能 检测 到 手指 "悬浮 "在 某 个 目标 上 面 - 所 以 ， 通 过 这 种 方式 提供 重要 的 语义 信息 (比如 ， 提 供 “ 这 个 控制 是 什 

么 7?" 弹 出 层 ) 是 不 可 行 的 , 除非 你 提供 了 一 种 触摸 友好 的 方式 来 提供 信息 . 对 于 如 何 使 用 hovering 来 向 用 户 展示 信息 你 需要 说 
慎 . 





然而 ， 足 够 有 趣 的 是 , CSS 的 :hover 伪 类 在 某 些 情况 下 可 以 通过 触摸 触发 - 轻巧 某 个 元 素 使 其 具有 : hover 状 态 时 当 手 指 按 下 的 
时 候 ， 它 也 获得 了 :hover 状 态 .( 在 IE 中 ,:hover 只 有 当 用 户 的 手指 按 下 的 时 候 才 起 作用 ,其 他 浏览 器 中 :hover 被 一 直 保持 有 效 直 到 
下 一 次 敲打 或 者 鼠标 移动 ) 这 是 一 种 在 触摸 接口 中 实现 弹出 菜单 的 有 效 方式 -副作用 就 在 于 此 时 :hover 状 态 也 触发 了 .例如 : 


<style> 
img ~ .content { 
display:none; 


y 


img:hover ~ .content { 
display:block; 

} 

</style> 


<img src="/awesome.png"> 
<div class="content">This is an awesome picture of me</div> 


一 且 另 一 个 元 素 被 融 击 ， 当 前 元 素 就 不 在 多 于 活路 状态 ，hover 状 态 也 会 消失 ， 就 像 用 户 使 用 鼠标 时 将 鼠标 指针 移 到 了 元 素 外 
面 一 样 . 你 可 能 也 希望 把 内 容 包 应 在 一 个 «a» 元 素 中 来 实现 制 表 位 的 效果 ， 那 样 用 户 可 以 通过 鼠标 移 上 或 者 点 击 ， 蚀 摸 敲 击 
或 者 键盘 按 下 来 显示 或 者 隐藏 额外 信息 ， 而 不 需要 Javascript 控 制 . 当 我 开始 让 我 的 Web Audio Playground 能 够 使 用 触摸 接口 
时 ， 弹 出 菜单 已 经 能 够 很 好 的 响应 触摸 事件 的 时 候 我 很 高 兴 ， 因 为 我 已 经 用 过 这 种 结构 了 ! 





上 面 的 方式 在 基于 鼠标 指针 的 接口 和 触摸 接口 中 都 能 够 很 好 的 工作 .这 与 "title" 是 相 比 较 而 言 的 ， 它 在 元 素 被 激活 的 时 候 将 不 会 
显示 出 来 : 


«img src-"/awesome.png" title-"this doesn't show up in touch"» 


触摸 精度 vs. 鼠标 精度 


鼠标 跟 现 实 中 的 老鼠 在 概念 上 是 分 离 的 ,区 别 在 于 他 们 非常 精确 ,因为 底层 操作 系统 通常 会 追踪 指针 的 精确 像素 精度 . 移动 开发 
者 另 一 方面 已 经 知道 手指 在 触摸 屏 上 的 触摸 并 不 如 此 准确 ,主要 是 由 于 跟 屏 幕 交 互 时 手指 表面 积 的 尺寸 太 大 《部 分 原因 是 由 于 
你 的 手指 挡住 了 屏幕 ) . 
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很 多 个 人 和 公司 都 对 如 何 设计 能 够 容纳 基于 手指 交互 的 应 用 和 网 站 进行 了 大 量 的 用 户 研究 ,很 多 书 也 是 关于 这 个 话题 的 .基本 的 
意见 就 是 通过 增加 填补 空间 (padding) 来 增加 目标 对 象 的 尺寸 ,然后 通过 增加 元 素 之 间 的 间距 (margin) 来 降低 错误 敲 击 的 可 能 性 . 
(Margins 不 包含 在 处 理 触 摸 和 点 击 事 件 的 敲 击 检测 中 ,padding 却 包含 在 这 其 中 ) 对 于 Web Audio Playground 系 统一 个 主要 的 修 
补 工作 就 是 增加 连接 点 的 尺寸 ， 这 样 他 们 就 能 够 更 准确 的 被 触摸 . 





很 多 浏览 器 厂商 在 处 理 基 于 触摸 接口 的 时 候 也 进入 了 逮 辑 来 帮助 在 用 户 触 摸 屏幕 时 准确 定位 目标 元 素 ， 同 时 降 错 误 点 击 的 可 
能 性 -尽管 这 样 做 通常 修正 的 是 点 击 事件 ， 而 不 是 移动 事件 〈 尽 管 IE 好 像 也 修改 了 mousedown/mousemove/mouseup 事 件 ) . 


有 限 的 使 用 触 控 钦 理 器 , 否则 滚屏 会 卡 顿 


把 你 的 触 控 处 理 器 限制 在 你 需要 他 们 的 地 方 也 很 重要 ; 触 控 元 素 可 能 非常 消耗 带宽 ， 所 以 滚动 屏幕 的 时 候 要 尽量 避免 引发 触 控 
处 理 器 (因为 你 的 触 控 人 处理 器 可 能 会 干扰 到 浏览 器 滚屏 优化 -现代 的 浏览 器 会 试 着 用 显卡 线程 来 处 理 屏 幕 滚 动 ， 但 如 果 他 们 每 
次 都 要 检查 javascript 来 知道 是 否 有 事件 需要 被 app 人 处理， 那 基本 上 这 个 优化 就 度 了 。). 你 可 以 试 试 这 里 的 浏览 器 行为 的 一 个 
示例 . 


一 条 避免 这 个 问题 的 技巧 就 是 只 在 你 的 ui 中 很 小 一 部 分 使 用 触 控 事件 处 理 器 , 把 你 的 触 控 处 理 器 放 在 这 里 (比如 ， 不 要 放 在 整 
个 页 面 的 body 标 签 里 。); 简 而 言 之 ， 尽 可 能 的 限制 你 的 触 控 处 理 器 的 使 用 范围 . 


多 点 触 控 


最 后 一 件 有 趣 而 又 具有 挑战 性 的 事 是 ， 尽 管 我 们 称 之 为 " 触 控 ”用户 界面 ， 几 乎 所 有 的 支持 都 是 多 点 触 控 的 ， 也 就 是 说 应 用 程 
序 接口 支持 每 次 不 止 一 次 触 控 输入 。 当 你 准备 在 你 的 应 用 中 支持 触 控 时 ， 你 应 该 考虑 多 点 触 控 会 如 何 影 响 你 的 应 用 程序 。 





如 果 你 开发 了 主要 靠 鼠 标 驱动 的 程序 的 话 ， 那 么 你 会 习惯 于 用 至 多 一 个 光标 点 的 系统 建立 ， 它 不 会 典型 地 支持 多 个 光标 。 对 
于 大 多 数 应 用 ， 你 将 会 色色 把 触 控 事 件 映射 到 一 个 单独 的 光标 接口 ， 但 是 ， 我 们 见 过 的 大 多 数 桌面 触 控 输 入 软件 可 以 处 理 至 
少 2 次 同时 的 输入 ， 而 且 大 多 数 新 的 软件 似乎 支持 至 少 5 次 同时 的 输入 。 上 比如 说 开发 屏幕 钢琴 按键 ， 你 要 能 够 支持 同时 的 多 点 
触 控 输 入 。 目前 实现 了 的 W3C 触 控 API 接 口 没有 能 决定 软件 能 够 支持 多 少 触 控 点 的 APl， 因 此 你 将 不 得 不 尽 最 大 努力 估计 你 
的 用 户 将 需要 多 少 触 控 点 ， 或 者 注意 观察 现实 中 需要 多 少 触 控 点 并 适应 之 。 例 如 ， 在 一 个 钢琴 应 用 中 ， 如 果 你 从 没 见 过 需要 
两 个 以 上 的 触 控 点 ， 那 么 你 可 能 会 想 增 加 一 些 " 和 弦 " 界 面 了 。PointerEvents API 就 有 一 个 能 够 决定 "和 和弦" 性 能 的 接口 。 


触摸 起 来 


我 希望 这 篇 文章 给 你 提供 了 一 些 指导 ， 有 关于 实现 触摸 与 鼠标 交互 时 遇 到 的 普通 难题 。 当 然 ， 比 任何 其 他 建议 都 重要 的 是 ， 
你 应 该 在 手机 ， 平 板 电脑 ， 还 有 混合 了 鼠标 和 触摸 的 桌面 环境 下 测试 你 的 应 用 。 如 果 你 没有 触摸 与 鼠标 硬件 ， 可 以 使 用 
Chrome 的 "模拟 触摸 事件 "， 以 便 测 试 不 同 的 场景 。 


依据 这 些 指导 创建 吸引 人 的 互动 体验 ， 使 其 良好 的 工作 于 触摸 输入 ， 妃 标 输 入 ， 还 有 黄 至 是 
的 ， 也 是 相对 较为 容易 的 。 


e MS 
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A 
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如 何 延 时 触发 事件 


jQuery 的 文档 中 提 到 性 能 优化 的 时 候 ， 有 一 条 就 是 关于 事件 触发 频率 的 问题 ， 大 部 分 影响 性 能 的 操作 不 是 click 之 类 的 事 
件 ， 而 是 scroll, mouseover 这 样 的 事件 。 解 决 这 些 事件 频繁 触发 的 方法 也 很 简单 ， 就 是 加 一 个 定时 器 ， 延 时 执行 。 


代码 


function debounce(method, delay) { 
clearTimeout(method. tId); // important! 
method. tId = setTimeout(function() { 
method(); 
}, delay); 
3 


var DAscrollPosition - $(window).scrollTop(); 


function getScrollDirection() { 
var scroll - $(window).scrollTop(); 
if (scroll > DAscrollPosition) ( 


parent.postMessage('scrolldown', 'http://www.tlc.com.adops-002.dp.discovery.com'); 
j 
if ((scroll « 100) && (scroll « DAscrollPosition)) ( 

parent.postMessage('scrollup', 'http://www.tlc.com.adops-002.dp.discovery.com'); 
h 


DAscrollPosition = scroll; 

J; 

$(window).scroll(function() { 
debounce(getScrollDirection, 100); 


}); 
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数组 的 操作 


NodeList 





NodeList 看 起 来 像 一 个 Array (数组 ) ， 你 可 以 使 用 中 括号 来 访问 他 们 的 节点 ， 而 且 你 还 可 以 通过 length 属 性 知道 它 有 多 少 元 
素 。 但 是 它 并 没有 实现 Array 的 所 有 接口 ， 因 此 使 用 $$(*).forEach 会 返回 错误 ， 在 JavaScript 的 世界 里 ， 有 一 堆 看 起 来 像 
Array 但 其 实 不 是 的 对 象 。 如 function 中 的 arguments 对 象 。 因 此 在 他 们 身上 通过 call 和 apply 来 应 用 数组 的 方法 是 非常 有 用 的 。 


简单 的 将 他 们 转换 为 数组 的 方法 , 比如 画 数 的 参数 arguments: 


function func() { 


var args - Array.prototype.slice.call(arguments); 
/是 of 
var args = [].slice.call(arguments); 


基本 操作 


常规 的 构造 方法 是 循环 通 历 赋值 ， 取 值 一 般 直接 使 用 索引 。 常 用 的 方法 有 : 


push(): Adds one or more elements to the end of an array and returns the new length of the array. 

pop(): Removes the last element from an array and returns that element. 

shift(): Removes the first element from an array and returns that element. 

reverse(): Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. 
sort(): Sorts the elements of an array in place and returns the array. 

splice(): Adds and/or removes elements from an array. 

unshift(): Adds one or more elements to the front of an array and returns the new length of the array. 


向 数组 中 插入 指定 元 素 


FARBA: 插入 或 替换 元 素 
push: 末尾 添加 元 素 
unshift: 首部 添加 元 素 


特殊 的 ， 要 提 到 一 个 splice WA, ERA: 


array.splice(start, deleteCount[, itemi[, item2[, ...]]]) 


参数 需要 注意 一 下 : 


3] 


start : 开始 删除 的 位 置 

deleteCount : 删除 的 个 数 

[, item1[, item2[, ...]] : 替换 的 元 素 , 如 果 start 超 过 了 数组 长 度 ， 实 际 上 就 是 追加 的 效果 ， 删 除 的 元 素 小 于 添加 的 元 素 时 
候 ， 也 是 追加 效果 。 


除数 组 中 指定 元 素 
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删除 首尾 的 方式 是 使 用 : pop 和 shift 。 


但 是 如 果 我 们 要 删除 特殊 的 指定 元 素 ， 先 要 获取 到 指定 元 素 的 下 标 ， 然 后 使 用 splice 进行 替换 。 


ES5 标 准 中 新 增 的 方法 


e forEach (js v1.6) 

e map (js v1.6) 

e filter (js v1.6) 

e some (js v1.6) 

e every (js v1.6) 

e indexOf (js v1.6) 

e lastindexOf (js v1.6) 
e reduce (js v1.8) 

e reduceRight (js v1.8) 


对 于 让 人 失望 很 多 次 的 IE6-IE8 浏 览 器 ，Array 原 型 扩展 可 以 实现 以 上 全 部 功能 ， 所 以 也 就 有 了 ES5-shim 项 目 。 马 上 都 要 到 
ES6 得 节奏 了 ， 这 些 再 不 熟悉 就 别 做 前 端 了 。 


forEach 
简化 通 历 的 方法 ， 使 用 起 来 是 这 样 : arr.forEach(callback[, thisarg]) 。callback 默 认 带 有 三 个 参数 : 


e currentValue 
e index 
e array 


thisArg 是 可 选 参 数 ， 代 表 可 选 的 上 下 文 参数 (改变 回调 函数 里 面 的 this 指 向 ) .如 果 这 第 2 个 可 选 参数 不 指定 ， 则 使 用 全 局 对 象 
RE (在 浏览 器 是 为 window) ， 严 格 模式 下 甚至 是 undefined， 


注意 : 和 使 用 for 循 环 通 历 的 区 别 是 ， forEach 不 会 通 历 纯粹 的 没 定义 的 元 素 ， 比 如 : 


var arr 7 [1,2,,4]; 
arr.forEach(console.10g); 
for (var i = 0, len = arr.length; i < len; itt) ( 


console.log(arr[i]); 


» 


every 
TER Ac EUIS r8 RET SER BER RE E Booleanj&, '& Fig EX s S MARATRA, RREH Ereturnby 


条 件 。 如 不 指定 ， 默 认 返 回 false。 找 出 所 有 满足 的 情况 ， 不 满足 就 退出 执行 。 返 回 值 只 要 是 弱 等 于 == true/falsesi n] EA T , 
而 非 非 得 返回 === true/false. 


Some 
按照 条 件 判 断 数组 是 否 符合 要 求 的 作用 ,返回 的 是 Boolean 值 ， 它 会 用 回调 画 数 去 逼 历 所 有 的 数组 元 素 ， 只 要 有 符合 的 ， 就 会 


返回 true。 如 果 回 调 画 数 不 指 定 return 值 ， 默 认 返 回 false。 效 果 就 和 forEach 类 似 了 。 返 回 值 只 要 是 弱 等 于 == true/false 就 可 以 
了 ， 而 非 非 得 返回 == true/false. 


fliter 
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过 滤 ， 筛 选 的 作用 。 返 回 的 是 一 个 新 数组 ， 根 据 回调 范 数 去 判断 筛选 元 素 。 返 回 值 只 要 是 弱 等 于 == true/false 就 可 以 了 ， 而 非 
非得 返回 === true/false. 


映射 的 作用 ， 将 原 数组 的 每 个 元 素 通过 回调 方法 映射 ， 返 回 一 个 同样 大 小 的 新 数组 。 


var data - [1, 2, 3, 4]; 
var arrayOfSquares = data.map(function (item) { 


return item * item; 


3) 


alert(arrayOfSquares); // 1, 4, 9, 16 


reduce 


用 法 接近 于 和 迭代 ， 递 入。 语法 为 : array.reduce(callback[, initialvalue]) .这 个 方法 是 ES5.1 之 后 提出 的 ， 算 是 比 上 面 的 方法 
都 新 一 点 。 


callback 画 数 接受 4 个 参数 : 之 前 值 、 当 前 值 、 索 引 值 以 及 数组 本 身 。initialValue 参 数 可 选 ， 表 示 初 始 值 。 若 指定 ， 则 当 作 最 


初 使 用 的 previous 值 ; 如 果 缺 省 ， 则 使 用 数组 的 第 一 个 元 素 作为 previous 初 始 值 ， 同 时 current 往 后 排 一 位 ， 相 比 有 initialValue 
值 少 一 次 迭代 。 


var sum = [1, 2, 3, 4].reduce(function (previous, current, index, array) { 
console.log(previous, current, index, array); 
return previous + current; 


5 
console.log(sum); // 10 


如 果 initialvalue 不 存在 ， 那 么 索引 就 从 2 开始 ， 以 后 每 次 传递 的 previous 就 是 上 一 个 函数 return 的 值 。 
如 果 initialvalue 存在 ， 那 么 传 入 的 initialvalue 就 作为 第 一 次 的 previous 值 。 
reduceRight 


reduceRight ER reduce 相 比 ， 语 法 类 似 : array.reduceRight(callback[, initialvalue]) o 


差别 在 于 reduceRight 是 从 数组 的 末尾 开始 的 。 
A MN 

参考 资料 

e MDN: Array 

e ES5 中 新 增 的 Array 方 法 详细 说 明 


e ES5-shim 
e Javascript — Arraylike 的 7 种 实现 
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dn 
in 
EZ 


B3 TR Jg 


对 象 的 操作 
判断 元 素 是 否 存在 对 象 中 


使 用 for. .in 可 以 通 历 元 素 的 所 有 属性 ， 如 果 是 带 有 继承 的 对 象 ， 配 合 hasownProperty 通 历 出 对 象 自 身 的 属性 ， 而 不 是 原型 


链 上 的 。 
对 象 在 数组 中 
比如 这 样 : 


var arr = [ 
(order: 3, name: 3}, 
(order: 1, name: 1}, 
(order: 2, name: 2} 


AD feris 75 


ARRUIN 7 ie ze EH yr Ibi, oEIlindexs&8l. 


如 何 排序 


排序 的 话 ， 使 用 Array 自 带 的 sort 方 法， 传人 自 定 的 比较 对 象 ， 比 如 : 


arr.sort(function(a,b) { 
return a.order » b.order? false: true; 


» 


yx 

arr = [ 
{order: 3, name: 3}, 
{order: 2, name: 2}, 
{order: 1, name: 1} 


e MDN: Object 


对 象 的 操作 
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mobile 设 各 的 横竖 屏 切换 检测 


orientationchange Event 


我 们 可 以 选择 在 window 对 象 上 监听 orientationchange 属性 。 上 比如 : 


// Listen for orientation changes 
window.addEventListener("orientationchange", function() { 
// Announce the new orientation number 
alert(window.orientation); 
alert(window.outerWidth); 
alert(innerWidth); 
}, false); 


window.orientation 的 取 值 : 


0: portrait 


90: landscape rotated to the left 


-90: landscape rotated to the right 
180: portrait, ipad 下 才能 取 到 


resize Event 


设备 旋转 的 时 候 ，window 的 resize 事 件 也 是 被 触发 的 。 判 断 的 方法 是 : 


e outerWidth, outerHeight: 检测 是 point 
e innerWidth, innerHeight: 检测 的 是 pixel 


window.matchMedia 
这 是 一 段 JS 人 代码， 可 以 查询 对 应 的 css 媒 体 查 询 语句 是 否 匹 配 。 


// Find matches 
var mql = window.matchMedia("(orientation: portrait)"); 


// If there are matches, we're in portrait 
if(mql.matches) { 

// Portrait orientation 
} else ( 

// Landscape orientation 


} 


// Add a media query change listener 
mql.addListener(function(m) { 
if(m.matches) ( 
// Changed to portrait 


} 
else { 
// Changed to landscape 
J 
35 


Media Query 
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使 用 css 媒 体 查询 : 


1* portrait =y 

@media screen and (orientation:portrait) { 
/* portrait-specific styles */ 

J 

/* landscape */ 

Qmedia screen and (orientation:landscape) { 
/* landscape-specific styles */ 


» 


~ MSN 
参考 资料 


e Detect Orientation Change on Mobile Devices 
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生成 随机 数字 


Math.random, returns a floating-point, pseudo-random number in the range [0, 1) 


[0,1) 


// Returns a random number between 9 (inclusive) and 1 (exclusive) 
function getRandom() { 
return Math.random(); 


} 


[min, max) 


// Returns a random number between min (inclusive) and max (exclusive) 
function getRandomArbitrary(min, max) { 
return Math.random() * (max - min) + min; 


[min, max) 整 数 


// Returns a random integer between min (included) and max (excluded) 
// Using Math.round() will give you a non-uniform distribution! 
function getRandomInt (min, max) { 

return Math.floor(Math.random() * (max - min)) + min; 


5 


e Math random 
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setTimeout 的 误区 


很 多 人 对 setTimeout 函数 的 理解 就 是 : 延 时 为 n 的话 ， 画 数 会 在 n 毫秒 之 后 执行 。 事 实 上 并 非 如 此 ,这 里 会 存在 几 个 问题 : 


setTimeout 函数 的 及 时 性 问题 


var d = new Date, count = 0, f, timer; 
timer = setInterval(f = function (){ 
if(new Date - d > 1000) 
clearInterval(timer), console.log(count); 
count; 


3, 0); 


可 以 看 出 1s 中 运行 的 次 数 大 概 在 20078 左右 ， 有 人 会 说 那 是 因为 new Date 和 函数 作用 域 的 转换 消耗 了 时 间 , 其 实 不 是 ， 而 


是 setlnterval 和 setTimeout 辑 数 运转 的 最 短 周期 是 5ms 左右 ， 这 个 数值 在 HTML 规 范 中 也 是 有 提 到 的 : 


5. Let timeout be the second method argument, or zero if the argument was omitted. 


WR timeout 参数 没有 写 ， 默 认为 0 


7. If nesting level is greater than 5, and timeout is less than 4, then increase timeout to 4. 


IIRBEEBUEZUAC 5, FH timeout 设置 的 数值 小 于 4 则 直接 取 4. 





如 果 需 要 更 加 短 的 周期 ， 可 以 使 用 : 


e requestAnimationFrame 它 人 允许 JavaScript 以 60+ 帧 /s 的 速度 处 理 动画 ， 他 的 运行 时 间 间 隔 比 setTimeout 是 要 短 很 多 


的 。 


e process.nextTick 这 个 是 NodeJS 中 的 一 个 函数 ， 利 用 他 可 以 几乎 达到 上 面 看 到 的 while 循环 的 效率 


e ajax 或 者 插入 节点 的 readState 变化 
e MutationObserver 
e setlmmediate 


会 被 阻塞 


由 于 Javascript 是 单线 程 的 ， 所 以 会 存在 被 阻塞 的 情况 : 


var d = new Date; 
setTimeout (function(){ 
console.log("show me after 1s, but you konw:" + (new Date - d)); 
}, 1000); 
while(1) if(new Date - d > 2000) break; 


我 们 期 望 console 在 1s 之 后 出 结果 ， 可 事实 上 他 却 是 在 2075ms 之 后 运行 的 ， 这 就 是 JavaScript 单线 程 给 我 们 带 来 的 烦 


恼 ，while 循 环 阻塞 了 setTimeout 函数 的 执行 。 
: PIS 

无 法 捕获 

try...catch 捕 捉 不 到 它 的 错误 : 


tryt 
setTimeout(function()( 
throw new Error(" 我 不 希望 这 个 错误 出 现 !") 
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}, 1000); 
} catch(e){ 
console.log(e.message); 


} 


在 与 DOM 事 件 打 交道 的 时 候 


因为 浏览 器 端 主要 由 三 个 线程 :javascript 执行 ，UI 演 染 ， 事 件 触发 队列 。javascript 执 行 的 线程 与 UI 演 染 的 线程 又 是 互 斥 的 ， 
所 以 如 果 在 一 个 dom 事 件 ， 特 别 是 onmousexxx 和 onkeyxx 事件 中 ， 对 另外 的 dom 元 素 进 行 操作 ， 比 如 focus 的 时 候 ， 需 要 设 
iB setTimeout 将 这 些 操作 添加 到 事件 触发 的 队列 中 ， 等 当然 的 dom 操 作 执 行 完 成 后 执行 。 


比如 这 个 代码 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
«meta http-equiv-"Content-Type" content-"text/html; charset=UTF-8" /> 
«title»setTimeout«/title» 
«script type-z"text/javascript"» 
function get(id) { 
return document.getElementById(id); 
j 
window.onload = function () { 
// 第 一 个 例子 : 未 使 用 setTimeout 
var makeBtn = get('makeinput'); 
makeBtn.onmousedown = function (e) { 
console.log(e.type); 
var input - document.createElement('input'); 
input.setAttribute('type', 'text'); 
input.setAttribute('value', 'testi1'); 
get('inpwrapper').appendChild(input); 
input.onfocus = function (e) {// 观 察 我 们 新 生成 的 jnput 什 么 时 候 获取 焦点 的 ， 或 者 它 有 没有 像 原 文 作者 说 的 那样 被 丢弃 了 
console.info('input focus'); 




















N 
input.focus(); 
input.select(); 

} 

makeBtn.onclick = function (e) { 
console.log(e.type); 

YN 

makeBtn.onmouseup = function (e) ( 
console.log(e.type); 

YN 

makeBtn.onfocus = function () {// 观 察 我 们 生成 按钮 什么 时 候 获 取 焦 点 的 
console.log('makeBtn focus'); 





} 














// 第 二 个 例子 : 使 用 setTimeout 
var makeBtn2 = get('makeinput2'); 
makeBtn2.o0nmousedown = function (e) ( 
console.log(e.type); 
var input - document.createElement('input'); 
input.setAttribute('type', 'text'); 
input.setAttribute('value', 'testi1'); 
get('inpwrapper2').appendChild(input); 
input.onfocus = function (e) {// 观 察 我 们 新 生成 的 jnput 什 么 时 候 获取 焦点 的 ， 或 者 它 有 没有 像 原 文 作者 说 的 那样 被 丢弃 了 
console.info('input focus'); 








YN 
//setTimeout 
setTimeout(function () { 
input.focus(); 
input.select(); 
} 9); 
J 
makeBtn2.onclick = function (e) { 
console.log(e.type); 
}; 
makeBtn2.onmouseup = function (e) { 
console.log(e.type); 
}; 
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makeBtn2.onfocus = function () {// 观 察 我 们 生成 按钮 什么 时 候 获 取 焦 点 的 
console.log('makeBtn2 focus'); 


// 第 三 个 例子 ，onkeypress 输 入 的 时 候 少 了 一 个 值 
get('input').onkeypress = function () { 
get('preview').innerHTML - this.value; 


H 
} 
</script> 
</head> 
<body> 


<h1><code>setTimeout</code></h1> 

<h2>1、 未 使 用 <code>setTimeout</code></h2> 
«button id="makeinput"> 生 成 input</button> 
<p id="inpwrapper"></p> 









































<h2>2、 使 用 <code>setTimeout</code></h2> 
«button id="makeinput2"> 生 成 input«/button» 
«p id="inpwrapper2"></p> 


<h2>3、 另 一 个 例子 </h2> 
<p> 
<input type="text" id="input" value="" /><span id="preview"></span> 
</p> 
</body> 
</html> 


你 能 说 出 点 击 对 应 的 输出 结果 吗 ， 并 告知 原因 ? 


e JavaScript 异 步 编程 原理 
e JavaScript 秘密 花园 
e javascript 线 程 解释 (setTimeout,setinterval 你 不 知道 的 事 ) 


P4 
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前 端面 斌 


~p» MSN 
资 料 


参考 资 


e Front-end-Developer-Interview-Questions 
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一 些 大 前 端 ， 小 前 端 ， 前 端 技能 的 脑 图 ， 见 assets 目 录 。 当 好 一 个 前 端 工程 十 ， 特 别 重要 的 一 点 是 要 理解 浏览 器 的 工作 原 
理 。 这 一 块 可 以 参考 前 面 的 原理 章节 。 


e The Web platform: Browser technologies 

e Web 开 发 技能 树 ,英文 : web 开 发 技能 树 ， 和 魔 普 世 界 里 加 天 赋 类 似 的 效果 。 
e Web 开发 技能 树 : 上 面 那 个 的 中 文 版 ， 多 了 些 图 书 资 料 。 

e JS Recipes: JavaScript tutorials for backend and frontend development. 
e Github 上 最 火 的 前 端 开源 项 目 : 从 结构 介绍 到 部 署 。 

e. 怎样 成 长 为 一 个 优秀 的 Web 前 端 开 发 工程 病 ? 

e Web 前 端 学 习 笔 记 

e 结合 个 人 经 历 总 结 的 前 端 人 门 方法 


培训 公司 





一 般 的 培训 机 构 都 会 列 出 基本 的 技能 ， 也 是 值得 我 们 学 习 的 一 部 分 。 


e 珠 峰 培训 
e 智能 社 
e 妙趣 课堂 
e 极 客 学 院 
e WRM 
e 实验 楼 


面试 集合 


e 5 Typical JavaScript Interview Exercises 
e Front-end-Developer-Interview-Questions 
。 最 全 前 端面 试问 题 及 答案 总 结 

e 前 端面 试 笔试 题 们 


web 5h 


e Web 开 发 的 发 展 史 
e Web 研发 模式 演变 


脑 图 
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demo > 描述 


熟悉 Djiango/Ruby on rails 类 


*nix (ubuntu 什么 的 


server push (socket io) 





" 








Rfb... 


vim/gvim/macvim 





emacs 


eclipse/aptana 


sublime /Textmate/nodepad++.. 





firebug/Web developer 
Chrome 默认 工具 


fiddler/ 基 他 代理 软件 
jslint/jsdev 


G-Build 


Google closure. 


YUI compresso 





SVG/g 


glifyis 
workflowy.com 
EverNote Sio 
zootool 
RSS (google reader) 信息 获取 
Twitter、 新 浪 微 薄 
版 本 管理 工具 
DOM Troversal ZEN AHNE 
事件 DOM 
Rit.. 容 性 bug 
RI i 
angop BOM Good parts 
XMLHttpRequest 
跨 域 相关 nodejs 
CSS Object Model 
coffee script 
其 他 … 


设计 


熟悉 一 门框 架 (jQuery/YUI/Moontool/ 
dojo; 


WebWorker yi 


WebsSocket 


localstorage 


Canvas 


Audio/Video 


SVG 


ECMAScript 5 


History api | 


File api 


Geolocation API 


Drag&Drop 


Messaging 


Offline cache 


Rit... 
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html 








ELLA 兼容 性 测试 
— 文字 是 无 意义 的 英文 
hh 窗口 放大 缩小 
文字 超出 容器 


没有 css/ks 时 候 下载 失败 ) 


图 片 下 载 失 败 


生 能 测试 : yslow. pageSpeed. showSlow 
自动 化 测试 (selenium 等 


QUnit. jasmine; 








: 合理 划分 页 
REH 连接 数 
js 性 能 不 能 迷信 、 也 不 能 完全 不 信 
HTML 语 义 代 
HTML5 
DOCTYPE 
SEO 
Wap 
SVG/VML 
float 
absolute 
通用 布局 block format context 
Css2 和 css2.1 《css 权 威 指南 》 table (邮件 格式 排版 ) 
通用 样式 : http:/Lpeaus 
CSS3 new selector 
new css style 
双 倍 边 距 
IE 通 用 bug 
IE hack 方 式 fzm 
css hack 
图 片 IE png8 透明 
Css font icon 
Css spirite 


图 片 格式 与 压缩 率 的 关系 


据 设 值 width/height 提升 性 能 
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YQL/Company Open Platform i HTML 
APP Engine/Cloud -| Web 服 务 切 页 面 |- CSS 
Google Open API/Github PhotoShop 
YDN/YUIConf/JSConf 


QCon/Velocity 


JavaScript 


编程 语言 月 PHP/Python/Perl/Ruby/BashShell... 








D2/WebRebuild 
NodeParty/HTML5 研 究 小 组 


UED Teams 


jQueryMobile/html5/css3 


iPhone/iPad/iOs/android i 移动 终端 | 
responsive UI Design is 
ba 


| 前 沿 技术 社区 /会 议 


































NodeJS/FlashAS 


Firebug/Firebug-lite/Web Inspector 





YSlow/Smushit 
| 调试 工具 |e IEDeveloperToolBar/IETester 





SuperPreview/JsBeautifier 
Fiddler/WireShark/tcpdump 
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CSRF/XSS 
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代码 模 决 化 开发 /代码 本 本 管理 | | 软 技能 软件 工程 /软件 测试 原理 
交互 设计 /可 用 性 /可 访问 性 知识 | A b 
Z Re w3c/DOM/BOM/XHTML/XML/JSON/JSONP 
JSLint/CSSLint/YUICompressor ; 7 i NC | HTMLS/CSS3 
JSMin/TPacker-minifier yA N 前 端 标准 /规范 上 ECMAScript3/ECMAScript5 
Ant/Make 4 开发 流程 /部 署 CommonJS/AMD 
JSDoc/YUIDoc HTTP1.1 
WebPageTest 





jQuery/YUI2/YUI3 


ShowSlow/YSlow/34Rule 








Prototype/Mootools/ExtS 


Smarty/Django/Zend 
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PageSpeed 
HttpWatch 
DynaTrace's Ajax 






数据 结构 /MVC 

面向 对 象 /切面 编程 
函数 式 编程 
JavaScript 设 计 模 式 
JavaScript 编 程 模式 


D Op 
weibo.corrn/jayli 
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Bil Um AL 2. ER 


HTML*CSS 





对 Web 标 准 的 理解 、 浏 览 器 内 核 差 异 、 兼 容 性 、hack、CSS 基 本 功 : 布局 、 盒 子 模型 、 选 择 器 优先 级 及 使 用 、HTML5、CSS3、 移 动 端 


e 一 些 自 适应 或 垂直 水 平 居中 问题 汇总 
e Normal Flow 

e Containing Block 

e Margin Collapse 

e BFC 

e Baseline 

e Writing Mode 

e unicode-bidi 


JavaScript 


补充 一 下 JS 的 深入 理解 ， 参 考 汤姆 大 椒 的 博客 : 深入 理解 JavaScript 系 列 ， 理 解 一 些 原理 性 质 的 东西 。 别 停留 在 使 用 上 ， 不 然 


面试 的 时 候 很 容易 吃亏 。 那 些 你 觉得 不 在 意 的 东西 ， 往 往 会 是 你 成 功 的 阻碍 。 

















数据 类 型 、 面 向 对 象 、 继 承 、 闭 包 、 插 件 、 作 用 域 、 跨 域 、 原 型 链 、 模 块 化 、 自 定义 事件 、 内 存 泄漏 、 事 件 机制 、 异 步 装载 回 


ae a Uü 














JS 的 知识 点 ， 我 很 喜欢 王子 墨 总 结 的 那些 ， 很 完善 的 感觉 : 





1、DOM 结 构 两 个 节点 之 间 可 能 存在 哪些 关系 以 及 如 何在 节点 之 间 任 意 移动 。 





2、DOM 操 作 一 如 何 添 加 、 移 除 、 和 移动、 复制 、 创 建 和 查找 节点 等 。 








3、 事 件 一 如 何 使 用 事件 ， 以 及 IE 和 标准 DOM 事 件 模型 之 间 存 在 的 差别 。 














4, XMLHttpRequest — 这 是 什么 、 怎 样 完整 地 执行 一 次 GET 请 求 、 怎 样 检测 错误 。 


5、 严 格 模式 与 混 杀 模式 一 如 何 触发 这 两 种 模式 ， 区 分 它们 有 何 意义 。 





6、 盒 模型 一 外 边 距 、 内 边 距 和 边框 之 间 的 关系 ， 及 IE8 以 下 版 本 的 浏览 器 中 的 盒 模型 











7、 块 级 元 素 与 行内 元 素 一 怎么 用 CSS 控 制 它们 、 以 及 如 何 合理 的 使 用 它们 

















8、 浮 动 元 素 一 怎么 使 用 它们 、 它 们 有 什么 问题 以 及 怎么 解决 这 些 问 题 。 


9、HTML 与 XHTML 一 二 者 有 什么 区 别 ， 你 觉得 应 该 使 用 哪 一 个 并 说 出 理由 。 


























10、JSON 一 作用、 用途、 设计 结构 。 


基础 知识 


e JavaScript 的 基本 数据 类 型 
e 内 置 对 象 的 常用 方法 

e 理解 事件 机 制 

e 理解 原型 继承 

e 理解 作用 域 问 题 
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e 理解 模块 化 

e 性 能 优化 

e 知道 基本 的 编程 语法 ， 比 如 循环 ， 判 断 ，try/catch 等 等 

e 理解 包括 多 种 画 数 定义 以 及 赋值 的 方式 ， 包 括 匿名 辑 数 

e 理解 基本 的 命名 空间 ， 全 局 (window) 空间 以 及 对 象 空间 (不 包括 闭 包 ) 

e 理解 上 下 文 的 角色 以 及 this 变量 的 使 用 

e 理解 各 种 对 象 以 及 画 数 的 初始 化 和 声明 方式 

e 理解 javascript 比较 操作 符 ， 如 <, >, ==, ===， 以 及 对 象 和 字符 串 比 较 的 原理 和 对 象 映射 
e 理解 对 象 属性 和 函数 的 数组 索引 ， 以 及 这 和 真实 的 数组 之 间 的 区 别 。 





中 级 知识 


e 理解 常用 库 的 实现 原理 ， 比 如 选择 器 部 分 ， 事 件 绑 定 部 分 

e 检测 浏览 器 类 型 与 版 本 

e 了 解 特性 检测 

e 理解 定时 器 ， 以 及 它 的 工作 原理 ， 包 括 何 时 以 及 如 何 使 用 定时 器 来 异步 执行 方法 调用 
e 关于 回调 的 深度 支持 ， 以 及 如 何 通过 call 和 apply 方法 来 控制 上 下 文 和 函数 参数 传递 
e 理解 JSON 标记 以 及 eval 函数 

e 理解 闭 包 以 及 他 们 如 何 影响 你 的 代码 效率 

e AJAX 以 及 对 象 序列 化 


—— 


局 级 知识 


e 理解 方法 的 arguments 变量 ， 包 括 如 何 使 用 它 来 通过 arguments.length 重 载 范 数 ， 以 及 通过 arguments.callee 来 进行 
递归 调用 ， 需 要 注意 使 用 这 个 特性 有 一 定 的 危险 性 ， 因 为 ECMAScript 5 的 Strict 模式 不 支持 此 功能 ， 但 jQuery 和 Dojo 
都 用 到 了 它 。 

e 高 级 闭 包 比如 self-memoizing Wk, partially applied 辑 数 ， 以 及 最 可 爱 的 (function() 们 0 调用 。 

e 图 数 以 及 HTML prototype, prototype chain， 以 及 如 何 使 用 基本 的 javascript 对 象 和 画 数 (比如 Array) 来 简化 代码 。 

e 对 象 类 型 以 及 instanceof 的 使 用 

e 正则 表达 式 和 表达 式 编译 

e. With 语句 以 及 为 什么 不 要 使 用 它们 

e 最 困难 的 部 分 ， 知 道 如 果 利 用 所 有 这 些 工 具 ， 并 产生 处 和 干净， 整洁， 健壮 ， 快 速 ， 可 维护 以 及 兼容 不 同 浏览 器 的 代码 。 


和 web 相 关 的 知识 


e 如 何 高 效 的 操作 Dom 〈 添 加， 删除 以 及 更 新 ) ， 还 有 如 何 通过 使 用 document fragments 这 样 的 工具 来 最 小 化 浏览 器 的 
re-flows。 

e a tah DOM 元 素 属 性 提取 (比如 ，style，position 等 等 ) jQuery 和 Dojo 都 可 以 很 好 的 完成 这 些 工作 ， 尽 管 如 
此 ， 理 解 从 CSS 和 style 标签 中 提取 属性 的 差异 ， 以 及 如 何 计算 position 和 size 还 是 很 重要 的 。 

e 夺 浏 览 器 的 事件 处 理 ， 绑 定 ， 反 绑 定 ， 冒 泡 ， 以 及 如 何 取得 期 望 的 回调 上 下 文 。 在 一 次 ， 现 成 的 框架 也 可 以 很 好 的 处 理 
这 些 事情 ， 但 是 你 应 该 对 IE 浏览 器 和 W3C 标准 浏览 器 之 间 的 不 同 有 所 了 解 。 

e 正则 表达 式 选 取 DOM 节点 

e 浏览 器 功能 检测 以 及 智能 降级 


其 他 











HTTP、WEB 安 全 、 正 则 、 优 化 、 重 构 、 响 应 式 、 团 队 协 作 、 可 维护 、SE0、UED、 架 构 、 职 业 生 涯 


前 端 知识 点 224 


前 端 工程 病 手 册 





Ze e MSN 
-人 ^ 
参考 资料 


e 我 所 了 解 的 CSS 

e 你 不 知道 你 不 懂 javascript 

e RAL 

e 汤姆 大 瓜 的 博客 : 深入 理解 JavaScript 系 列 
e JavaScript 核 心 
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原则 和 与 技巧 
面试 方式 


一 般 程序 员 的 面试 分 为 : 代码 笔试 + 问答 面试 。 可 能 有 一 面 ， 二 面 ， 三 面 以 及 多 面 的 情况 。 迁 移 两 轮 主要 还 是 技术 方面 的 为 
主 ， 由 浅 入 深 。 三 四 轮 的 话 主 要 就 是 hr 和 boss 和 你 聊 待遇 和 规划 了 。 





代码 笔试 主要 就 是 考察 基本 能 力 ， 问 答 主 要 是 对 项 目 以 及 个 人 技能 的 深入 了 解 。 
MN $ Ab 

面试 人 员 应 该 县 各 的 技能 

一 个 优秀 的 程序 员 应 该 具有 怎样 的 技能 

e 主动 思考 

e 爱 学 习 

e 有 深度 

e 有 视野 


往 细致 了 点 说 ， 就 是 不 要 停留 在 使 用 的 层面 ， 多 余 了 解 更 深层 的 原理 。 


天 于 题目 


什么 样 的 面试 题 是 好 的 ? 淘宝 大 神 wintercn 认 为 有 三 点 衡量 指标 


e 区 分 度 
e 深度 
e uu 


是 的 ， 请 注意 这 里 并 没有 使 用 "难度 "这 个 词 ， 因 为 这 三 个 指标 都 与 难度 有 关系 。 这 个 题 的 答案 可 以 分 成 不 同 的 层级 : 





e position 属 性 常用 的 取 值 static、relative 以 及 absolute 和 它们 的 基本 行为 是 每 个 前 端 都 应 该 掌握 的 。 这 包括 relative 和 
absolute 的 定位 原点 。 -fixed 旧 版 本 IE 不 支持 ， 但 是 一 个 对 技术 有 热情 的 工程 病 也 是 应 该 了 解 的 。 -有 过 研究 工程 是 可 以 
知道 absolute 的 containing block 计 算 方式 跟 正常 流 不 同 ， 当 然 如 果 没 读 过 标准 的 话 ， 表 述 方式 不 一 定 是 这 样 。 -对 CSS 
布局 有 深入 研究 的 工程 病 会 知道 position 跟 display、margin collapse, overflow, floatix £&&/ETBE & JE B913 A o 


区 分 度 可 以 让 题目 可 以 适用 于 入 门 级 到 专家 级 的 各 种 面试 者 ， 深 度 可 以 保证 有 深度 研究 的 面试 者 可 以 展示 他 们 的 才能 ， 和 覆盖 
范围 可 以 有 效 地 了 解 面试 者 擅长 的 方向 。 


当面 试 者 前 面 回答 的 答案 足够 完美 ， 我 就 会 进行 追问 ， 确 保 问 到 我 开始 不 懂 或 者 面试 者 开始 不 懂 为 止 ， 这样 可 以 大 大 延展 题 
目的 区 分 度 和 深度 。 


考察 能 





web 前 端 工程 是 的 竞争 力 = web 前 端 知 识 + 能 力 
力 = 编程 能 力 + 工程 能 力 + 架构 能 
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这 其 中 不 包括 所 谓 的 学 习 能 力 ， 因 为 我 认为 学 习 能 力 是 通过 已 有 知识 来 体现 的 ， 如 果 一 个 具有 超 强 学 习 能 力 的 人 来 应 聘 web 
前 端 工程 病 但 是 他 有 具有 如 此 强 的 学 习 能 力 却 连 position 这 么 重要 的 属性 都 没 学 会 ， 那 是 不 是 下 一 步 该 要 求 这 人 附 上 证 明 自己 没 
有 精神 疾病 的 诊断 书 ? 


工程 能 力 和 架构 能 力 一 般 针 对 层级 较 高 的 工程 病 ， 所 以 一 般 来 讲 所 谓 能 力 考察 就 是 编程 能 力 ， 然 后 呢 ， 编 程 能 力 一 般 考 查 方 
式 就 是 案例 问题 ， 也 就 是 传说 中 的 一 一 “ 算 ! 法 ! 题 ” (当然 我 佛 提 到 ， 它 们 与 其 说 是 算法 题 ， 不 如 说 是 稍微 复杂 点 的 小 程序 ， 它 
们 之 所 以 看 上 去 不 太 有 用 是 因为 出 题 的 人 为 了 避免 理解 麻烦 剥 掉 了 实际 的 业务 场景 ， 毕 竟 各 个 公司 的 业务 都 不 是 一 名 两 句 可 
以 讲 清 楚 的 ) 。 


关于 评判 


面试 中 未 必 是 所 有 题目 全 都 回答 "正确 "就 一 定 会 通过 或 者 较 高 评价 。 面 试 是 面试 官 和 面试 者 双方 "挖掘 与 展示 才能 "的 过 程 ， 参 
考 前 面 提 到 的 面试 过 程 ， 全 部 回答 正确 的 情况 很 可 能 是 因为 面试 官 不 感 兴趣 懒得 追问 。 


对 于 面试 官 而 言 ， 基 本 评判 原则 就 是 "我 要 不 要 这 个 人 做 我 的 同事 ?"， 多 数 情况 下 ， 这 个 答案 会 非常 清楚 。 一 些 题 目 是 充分 
的 ， 也 就 是 "回答 对 了 说 明 这 个 人 具有 可 以 依靠 的 才能 "'， 一 些 题目 则 是 必要 的 ， 也 就 是 "回答 错 了 说 明 这 个 人 无 法 胜任 我 们 的 
工作 "。 


在 position 一 题 的 评判 上 ， 我 一 般 认 为 能 够 答对 static、relative 以 及 absolute 就 已 经 可 以 达到 必要 标准 。 而 因为 CSS layout 可 
能 是 面试 官 最 擅长 的 部 分 ， 又 考虑 到 误差 ， 当 面试 者 能 回答 80% 以 上 的 追问 ， 基 本 就 能 判定 面试 者 水 平 远 高 于 主考 官 ， 在 工 
作 中 能 够 作为 CSS 方 面 的 专家 来 依靠 。 


一 些 人 说 "属性 可 以 google 搜 索 " 则 更 离谱 ，position 在 CSS 布 局 中 是 相当 基础 的 知识 ， 对 它 的 行为 理解 深度 实际 上 代表 了 一 个 
工程 师 对 于 CSS 布 局 系统 的 理解 ， 这 个 理解 需要 长 时 期 的 学 习 ， 绝 对 不 是 可 以 临时 google 得 来 的 。 正 如 同 考 人 英语 ， 若 是 不 
认识 visibility 尚 可 以 解释 说 确实 没 怎么 用 过 ， 而 不 会 写 英 文字 母 v\ 则 说 明 这 个 人 根本 没 学 过 英语 。 


STAR 面试 法 


这 里 提 到 了 一 种 面试 原则 ， 叫 做 STAR 面试 法 .STAR" 是 SITUATION (背景 ) TASK (任务 ) 、ACTION (行动 ) 和 
RESULT (结果 ) 四 个 英文 单词 的 首 字 母 组 合 。 


在 招聘 面试 中 ， 人 和 仅仅 通过 应 聘 者 的 简历 无 法 全 面 了 解 应 聘 者 的 知识 、 经 验 、 技 能 的 掌握 程度 及 其 工作 风格 、 性 格 特点 等 方面 
的 情况 。 而 使 用 STAR 技巧 则 可 以 对 应 聘 者 做 出 全 面 而 客观 的 评价 。 
e 背景 (SITUATION) : 通过 不 断 提 问 与 工作 业绩 有 关 的 背景 问题 ， 可 以 全 面 了 解 该 应 聘 者 取得 优秀 业绩 的 前 提 ， 从 而 获 
知 所 取得 的 业绩 有 多 少 是 与 应 聘 者 个 人 有 关 ， 多 少 是 和 市 场 的 状况 、 行 业 的 特点 有 关 。 
e 工作 任务 (TASK) :每 项 任务 的 具体 内 容 是 什么 样 的 。 通 过 这 些 可 以 了 解 应 聘 者 的 工作 经 历 和 经 验 ， 以 确定 他 所 从 事 的 
工作 与 获得 的 经 验 是 否 适合 所 空缺 的 职位 。 
e 行动 (ACTION) : 即 了 解 他 是 如 何 完成 工作 的 ， 都 采取 了 哪些 行动 ， 所 采取 的 行动 是 如 何 帮 助 他 完成 工作 的 。 通 过 这 
些 ， 可 以 进一步 了 解 他 的 工作 方式 、 思 维 方式 和 行为 方式 。 
e 结果 (RESULT) : 每 项 任务 在 采取 了 行动 之 后 的 结果 是 什么 ， 是 好 还 是 不 好 ， 好 是 因为 什么 ， 不 好 又 是 因为 什么 。 


面试 技巧 
基础 知识 
对 基础 部 分 的 内 容 掌 握 必 须 牢靠 ， 什 么 属性 什么 方法 的 ， 都 要 知道 到 底 是 什么 。 


项 目 经 验 


面试 过 程 其 实 不 是 一 个 你 问 我 答 的 情况 ， 正 规 一 点 的 面试 还 是 要 以 你 的 实际 接触 为 点 ， 扩 展开 来 对 你 考核 。 所 以 在 讲 项 目的 
时 候 ， 你 需要 展示 你 自己 的 亮点 ， 可 以 说 一 些 装 逼 的 词 ， 但 装 逼 也 是 得 有 真 材 实 料 的 。 比 如 我 在 项 目 中 使 用 了 WebSocket， 
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那么 面试 官 很 可 能 问 你 WebSocket 是 什么 ， 底 层 原 理 你 知道 么 ? 如 果 你 当场 傻 掉 ， 面 试 官 就 会 觉得 你 只 是 会 使 用 别人 的 东 
西 ， 并 不 在 意 实 现 原 理 ， 终 究 是 码 农 。 那 么 事先 你 就 应 当 去 看 看 WebSocket 协 议 的 官方 文档 ( 纯 英文 ， 看 得 累 死 我 了 1 )， 这 
样 面试 官 一 问 你 ， 你 能 头头 是 道 ， 会 大 大 加 分 。 再 比如 ， 你 在 项 目 中 使 用 了 模块 化 ， 那 么 你 就 一 定 要 知道 什么 是 模块 化 ， 而 
不 是 说 你 会 用 模块 化 工具 。 其 实 要 求 并 不 高 ， 你 只 要 能 很 好 说 清楚 什么 是 AMD 规 范 ， 什 么 是 CommonJs 规 范 ， 各 自 的 优 缺 点 
是 什么 就 很 金 了 。 


记 住 重要 的 一 点 是 ， 一 定 要 把 面试 官 往 你 熟悉 的 领域 引导 ， 这 真 的 很 重要 ， 因 为 如 果 你 不 引导 ， 面 试 官 不 了 解 你 的 项 目 ， 看 
不 到 你 的 亮点 ， 就 只 能 一 直 问 技术 问题 刁难 你 ， 人 家 在 大 公司 待 这 么 久 了 ， 还 不 是 轻松 碾 压 你 。 所 以 你 在 引导 的 同时 ， 时 不 
时 提 及 一 些 事先 准备 好 的 关键 词 ， 技 术 官 一 问 ， 你 一 回答 ， 怎 么 都 受 了 。 


当然 ， 如 果 有 些 问题 是 你 可 能 是 真 的 不 会 的 ， 但 是 也 不 要 出 现 好 像 是 、 可 能 是 、 我 猜 之 类 的 词 眼 (我 之 前 就 是 这 样 跪 掉 的 )， 
而 是 说 按照 我 的 理解 、 给 过 一 点 思考 时 间 、 我 不 太 懂 这 个 问题 需要 我 从 哪个 角度 解析 、 我 以 前 遇 到 类 似 的 问题 是 怎样 这 个 问 
题 应 该 也 是 这 样 … 这 样 给 面试 官 的 印象 是 ， 即 便 你 不 懂 ， 但 是 你 在 全 力 思考 ， 而 且 这 样 会 给 自己 争取 很 多 时 间 。 


有 的 公司 其 实 技术 主管 也 就 决定 了 你 的 待遇 问题 ， 所 以 这 一 环节 不 一 定 出 现 。 但 是 问 的 几 个 问题 大 致 可 以 提前 思考 一 下 : 


e 你 为 什么 离职 

e 你 为 什么 选择 我 们 

e 用 几 个 词 描述 一 下 自己 
e 期 望 的 待遇 是 如 何 定 的 
e. 你 是 如 何 规划 自己 的 


对 公司 提问 
这 一 块 也 是 最 后 的 环节 ， 一 般 会 让 你 问 几 个 问题 ， 我 自己 会 问 的 有 


e 公司 的 技术 团队 规模 和 方向 

e 员工 的 晋升 途径 

e 公司 的 作息 与 加 班 情况 ， 以 及 补偿 情况 
e 公积金 是 按 什么 比例 缴纳 


e 面试 题目 : 根据 你 的 等 级 和 职位 变化 ， 入 门 级 到 专家 级 : 广度 +、 深度 1。 

e 题目 类 型 : 技术 视野 、 项 目 细 节 、 理 论 知识 ， 算 法 ， 开 放 性 题 ， 工 作案 例 。 

e 细节 追问 : 可 以 确保 问 到 你 开始 不 懂 或 面试 官 开始 不 懂 为 止 ， 这 样 可 以 大 大 延展 题目 的 区 分 度 和 深度 ， 知 道 你 的 实际 能 
力 。 因 为 这 种 关联 知识 是 长 时 - 期 的 学 习 ， 绝 对 不 是 临时 记得 住 的 。 

e 态度 : 回答 问题 再 棒 ， 面 试 官 〈 可 能 是 你 面试 职位 的 直接 领导 ) ， 会 考虑 我 要 不 要 这 个 人 做 我 的 同事 ? 所 以 态度 很 重 
要 。 (感觉 更 像 是 相亲 ) 

e 机 会 总 是 留 给 有 准备 的 人 ， 每 一 次 都 要 好 好 对 待 

e 别 紧张 ， 说 话 的 时 候 条 理 清晰 


` IN 
参考 资料 
e 如 何 面试 前 端 工程 病 ? 
e 一 名 靠 谱 的 JavaScript 程 序 员 应 各 的 素质 


e FEX 面 试 原则 
e STAR 面试 法 
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HTML 


e 每 个 HTML 文 件 里 开头 都 有 个 很 重要 的 东西 ，Doctype， 知 道 这 是 干什么 的 吗 ? 
e div+css 的 布局 较 table 布 局 有 什么 优点 ? 

e strong 与 em 的 异同 ? 

e 你 能 描述 一 下 渐进 增强 和 优雅 降级 之 间 的 不 同 吗 ? 

e. 为 什么 利用 多 个 域名 来 存储 网 站 资源 会 更 有 效 ? 

e 请 描述 一 下 cookies，sessionStorage 和 localStorage 的 区 别 ? 

e 简 述 一 下 src 与 href 的 区 别 。 

e 你 如 何 理解 HTML 结 构 的 语义 化 ? 


CSS 


e 有 哪 项 方式 可 以 对 一 个 DOM 设 置 它 的 CSS 样 式 ? 

e CSS 都 有 哪些 选择 器 ? 

e CSS 选 择 器 的 优先 级 是 怎么 样 定义 的 ? 

e CSS 中 可 以 通过 哪些 属性 定义 ， 使 得 一 个 DOM 元 素 不 显示 在 浏览 器 可 视 范围 内 ? 

e 超 链 接 访问 过 后 hover 样 式 就 不 出 现 的 问题 是 什么 ?如何 解决 ? 

e 行内 元 素 和 块 级 元 素 的 具体 区 别 是 什么 ?行内 元 素 的 padding 和 margin 可 设置 吗 ? 

e css 中 可 以 让 文字 在 垂直 和 水 平方 向 上 重 辣 的 两 个 属性 是 什么 ? 

e px 和 em 的 区 别 。 

e 描述 一 个 "reset" 的 CSS 文 件 并 如 何 使 用 它 。 知 道 nhormalize.css 吗 ?你 了 解 他 们 的 不 同 之 处 ? 


Je MS 
参考 $r 料 


e BAT 及 各 大 互联 网 公司 2014 前 端 笔试 面试 题 : HTML/CSS 篇 


html/css 面 试题 
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JavaScript 面 试题 


JavaScript 面 试 的 题目 ， 主 要 考察 的 内 容 还 是 逻辑 性 为 主 。 基 础 的 部 分 ， 主 要 是 对 内 置 画 数 的 使 用 ， 上 比如 String, Math, Array 
对 象 。 还 有 一 个 比较 讨 面试 喜欢 的 ， 就 是 正则 表达 式 。 


作用 域 链 

JS 核心 部 分 需要 理解 的 一 个 重要 部 分 。 
闭 包 

原始 对 象 


var a- 1; 
a.a-2; 
console.log(a.a); 


这 一 题 需要 理解 的 是 点 的 作用 ， 在 JS 解释 器 中 ， 首 先 会 判断 左 侧 的 变量 是 什么 类 型 ， 如 果 是 普通 对 象 ， 会 创建 一 个 新 的 对 象 
作用 域 ， 然 后 挂 载 a 属 性 。console.Ilog 部 分 的 a 也 是 又 创建 了 一 个 封装 对 象 ， 但 是 这 个 对 象 下 面 的 a 是 没有 赋值 的 。 


引用 类 型 


var a = (n:1); 
var b = a; 
a.x = a = (n:2); 


alert(a.x);// --> undefined 
alert(b.x);// --» [object Object] 


这 个 涉及 到 了 连续 赋值 的 情况 ， 详 情 参 考 javascript 连 等 赋值 问题 .在 程序 运行 到 之 后 ， 先 确定 好 了 ax F atala, BMA 
往 左 开始 赋值 的 。 还 有 一 点 就 是 可 以 理解 的 是 . 运算 优先 级 高 于 = 运算 符 ， 所 以 会 先 创 建 a.x 对 象 ， 然 后 在 执行 赋值 过 程 。 
赋值 顺序 从 右 向 左 。 








原型 链 

JS 核心 部 分 的 另 一 个 需要 理解 的 重要 部 分 。 

类 型 转换 

比较 时 候 的 转换 的 原则 : 

e 一 个 是 number 一 个 是 string 时 ， 会 尝试 将 string 转 换 为 humber 

e 尝试 将 boolean 转 换 为 number，0 或 1 

e 尝试 将 Object 转 换 成 humber 或 string， 取 决 于 另外 一 个 对 比 量 的 类 型 
运算 过 程 的 转换 原则 : 


e 字符 串 与 数字 相 加 ， 变 成 字符 串 
e 字符 串 与 数字 相 减 ， 变 成 数字 
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输出 下 面 几 个 代码 


function foo1(a){ 
return a + '01'; 


J 


foo1(01); 


function foo2(a){ 
return a + '010'; 


} 


foo2(010); 
console.log(0.2 * 0.4); 


Vani tood- e1172 1 
console.log(foo); 
console.log(typeof foo); 


基础 的 代码 使 用 技巧 


e 生成 [x,y] 范 围 的 随机 整数 

e 已 知 数组 var stringArray = ["This", "is", “Baidu”, “Campus”]，Alert 出 "This is Baidu Campus" 

e 已 知 有 字符 串 foo="get-element-by-id", 写 一 个 function 将 其 转化 成 驼峰 表示 法 "getElementByld” 
e var numberArray = [3,6,2,4,1,5]; 实现 倒 排 ， 排 序 。 

e 怎样 添加 、 移 除 、 移 动 、 复 制 、 创 建 和 查找 节点 

将 一 个 #fffff 类 型 的 数据 转换 为 rgb(255,255,255) 形式 


正则 表达 式 


去 除 字符 串 中 的 多 余 空格 ? 


如 果 使 用 了 Ns 作为 匹配 的 情况 ， 有 没有 消除 不 了 的 情况 (是 有 的 ) ， 具 体 是 什么 ? 


为 了 保证 页 面 输出 安全 ， 我 们 经 常 需 要 对 一 些 特殊 的 字符 进行 转 义 ， 请 写 一 个 函数 
escapeHtml， 将 <, >, &, “进行 转 义 


function escapeHtml(str) { 
return str.replace(/[«»"&]/g, function(match) ( 
switch (match) { 
case “<”: 
returncdslt s 
case “>”: 
return "&gt;"; 
case "&": 
return "&amp;"; 
case NI 
return "&quot;"; 
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写 一 个 function， 清 除 字符 串 前 后 的 空格 。( 兼 容 所 有 浏 帮 器 ) 


if (!String.prototype.trim) { 
String.prototype.trim = function() { 
return this.replace(/^Ns*/, "").replace(/Ns*$/,"") 


} 

} 

// test the function 

var str = " NtNn test string ".trim(); 
alert(str -- "test string"); // alerts "true" 


中 级 难度 的 


实现 一 个 函数 clone， 可 以 对 JavaScript 中 的 5 种 主要 的 数据 类 型 (包括 Number、 
String、Object、Array、Boolean) 进行 值 复制 


e. 考察 点 1 : 对 于 基本 数据 类 型 和 引用 数据 类 型 在 内 存 中 存放 的 是 值 还 是 指针 这 一 区 别 是 否 清楚 
e. 考察 点 2 : 是 否 知道 如 何 判断 一 个 变量 是 什么 类 型 的 
e 考察 点 3 : 递归 算法 的 设计 


VET 
Object.prototype.clone = function()( 
var o = this.constructor === Array ? [] : (Y; 
for(var e in this)( 
o[e] = typeof this[e] === "object" ? this[e].clone() : this[e]; 
j 
return 0; 


} 


DY m 
GEOP 
* 克隆 一 个 对 象 
* @param 0bj 
* Qreturns 
i 
function clone(0bj) { 
var buf; 
if (0bj instanceof Array) { 
buf = []; // 创 建 一 个 空 的 数组 
var i - Obj.length; 
while (i--) { 
buf[i] = clone(Obj[i]); 





J 
return buf; 
jelse if (Obj instanceof Object)[( 
buf = (y; // 创 建 一 个 空 对 象 
for (var k in 0bj) £ // 为 这 个 对 象 添加 新 的 属 
buf[k] = clone(0bj[k]); 





性 


} 
return buf; 

jelse( // 普 通 变量 直接 赋值 
return Obj; 





H 


如 何 消除 一 个 数组 里 面 重 复 的 元 素 ? 


myArray.filter(function(elem, pos,self){return self.indexOf(elem)-- pos;}) 


filter 是 过 小 的 意思 ，filter 通 过 一 个 画 数 的 参数 来 选择 什么 项 需要 被 filter 掉 ， 函 数 返回 true 保 留 ，false 干 掉 。 
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玉 数 参数 带 三 个 参数 ， 第 一 个 elem 是 这 一 项 元 素 ， 第 二 个 pos 是 这 一 项 所 在 的 位 置 ， 第 三 个 self 指 的 是 执行 filter 的 数组 。 那 
么 ， 你 看 ， 巧 妙 吗 :self.indexOf(elem) 是 指 这 个 项 目 在 数组 中 的 位 置 ， 位 置 是 第 一 个 ， 也 就 是 说 同样 的 项 目 在 第 一 位 和 第 5 位 
都 出 现 了 ， 他 返回 的 是 0， 而 此 时 pos 还 是 4， 所 以 通过 self.indexOf(elem) == pos 能 判断 出 这 一 项 是 不 是 重复 出 现 的 项 ， 如 果 
是 (返回 false) ， 则 干掉 它 。 


编写 一 个 JavaScript 函 数 ， 输 入 指定 类 型 的 选择 器 ( 仅 需 支持 id， tagName 三 种 
简单 CSS 选 择 器 ， 无 需 兼 容 组 合 选择 器 ) 可 以 返回 匹配 的 DOM 节 点 ， 需 考虑 浏览 器 兼容 
性 和 性 能 。 


var query = function(selector) { 

var reg = /^(#)?(\.)?(\w+)$/img; 

var regResult = reg.exec(selector); 

var result - []; 

// 如 果 是 id 选择 器 

if(regResult[1]) { 

if(regResult[3]) € 
if(typeof document.querySelector --- "function") ( 
result.push(document.querySelector(regResult[3])); 


J 
else { 
result.push(document.getElementById(regResult[3])); 
J 
} 
// 如 果 是 class 选 择 器 


else if(regResult[2]) { 
if(regResult[3]) { 


if(typeof document.getElementsByClassName === 'function') { 
var doms = document.getElementsByClassName(regResult[3]); 
if(doms) { 


result = converToArray(doms); 


j 


} 
// 如 果 不 支持 getElementsByClassName 函 数 
else { 
var allDoms = document.getElementsByTagName("*") ; 
for(var i = 0, len = allDoms.length; i < len; i++) { 
if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) { 
result.push(allDoms[i]); 
B 


y 
k 
// 如 果 是 标签 选择 器 
else if(regResult[3]) { 
var doms = document.getElementsByTagName(regResult[3].toLowerCase()); 
if(doms) { 
result = converToArray(doms); 
j 
H 


return result; 


} 


function converToArray(nodes){ 
var array = null; 
try{ 
array = Array.prototype.slice.call(nodes,0);// 针 对 非 TE 浏 览 器 

}catch(ex){ 

array = new Array(); 

for( var i = 0 ,len = nodes.length; i < len ; i++ ) ( 

array.push(nodes[i]) 

J 

} 


return array; 


理解 下 sort 排 序 的 原理 
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数组 的 sort 方 法 ， 默 认 是 按照 ascii 排 序 的 ， 为 了 对 数字 进行 区 分 ， 还 是 手动 传 入 一 个 sort 辑 数 。 


var arr - [11,2,28,5,8,4] 
arr.sort(function(a,b)(return a-b}) 


sortie — DHFR, Sd e ABSa FAERIT, bF BRR, HERRERÉRTeturn B A MRE 
正 的 ， 才 执行 排序 ， 所 以 最 后 排 下 来 是 从 小 到 大 ， 相 反 ， 如 果 return 的 是 b-a， 那 么 就 是 从 大 到 小 排序 。 


apply 和 call 方 法 的 异同 


对 于 apply 和 call 两 者 在 作用 上 是 相同 的 ， 即 是 调用 一 个 对 象 的 一 个 方法 ， 以 另 一 个 对 象 蔡 换 当 前 对 象 。 将 一 个 画 数 的 对 象 上 
下 文 从 初始 的 上 下 文 改变 为 由 thisObj 指定 的 新 对 象 。 


但 两 者 在 参数 上 有 区 别 的 。 对 于 第 一 个 参数 意义 都 一 样 ， 但 对 第 二 个 参数 : apply 传 人 的 是 一 个 参数 数组 ， 也 就 是 将 多 个 参 
数组 合成 为 一 个 数组 传 入 ， 而 call 则 作为 call 的 参数 传 入 (从 第 二 个 参数 开始 ) 。 如 func.call(func1,var1,var2,var3) 对 应 的 
apply 写 法 为 : func.apply(func1,[var1,var2,var3]) 。 


在 Javascript 中 什么 是 盆 数 组 ?如何 将 伪 数 组 转化 为 标准 数组 ? 


伪 数 组 (类 数组 ) : 无 法 直接 调用 数组 方法 或 期 望 length 属 性 有 什么 特殊 的 行为 ， 但 仍 可 以 对 真正 数组 通 历 方法 来 通 历 它 
们 。 上 典型 的 是 函数 的 argument 参 数 ， 还 有 像 调 用 getElementsByTagName,document.childNodes 之 类 的 ,它们 都 返回 NodeList 
对 象 都 属于 伪 数 组 。 可 以 使 用 Array.prototype.slice.call(fakeArray) 将 数组 转化 为 真正 的 Array 对 象 。 


想 实 现 一 个 对 页 面 某 个 节点 的 拖 虑 ? 如 何 做 ? (使 用 原生 JS) 


e 给 需要 拖 搜 的 节点 绑 定 mousedown, mousemove, mouseup 事 件 

e mousedown 事 件 触发 后 ， 开 始 拖 搜 m 

e mousemove 时 ， 需 要 通过 event.clientX 和 clientY 获 取 拖 搜 位 置 ， 并 实时 更 新 位 置 
e mouseup 时 ， 拖 搜 结 束 

e 需要 注意 浏览 器 边界 的 情况 


偏 门 的 
输出 一 下 代码 


function a(x){ 
return function b(y){ 
return y+x++ 
h 
J 


var ai - a(10) 
var a2 - a(20) 


a1(10) 
a2(10) 


var a - (n:1); 

var b = a; // 持 有 a， 以 回 查 

a.x = a = (n:2); 

alert(a.x);// --> undefined 
alert(b.x);// --» [object Object] 
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不 同 的 颜色 标记 出 来 页 面 中 各 层 的 HTML 


[].forEach.call($ $(""),function(a){ 


a.style.outline-"1px solid £'"«(--(Math.random()*(1««24))).toString(16) 
}) 


原理 参考 : 通过 一 行 代 码 学 习 javascript 


为 什么 *-[E11E*E1]*E*[1] = 1e ? 


答案 参考 : [为 什么 ++[ 四 [+ 四 ++0] = 10 ? 


e BAT 及 各 大 互联 网 公司 2014 前 端 笔 试 面试 题 : JavaScript 篇 
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jQuery 面试 题 


如 果 你 正 要 去 面试 一 个 职位 ， 它 需要 你 拥有 多 项 技能 ， 比 如 : Java、jQuery， 它 并 不 是 希望 你 明白 jQuery 每 一 个 细微 的 细 
节 ， 或 对 其 有 全 面 的 了 解 ， 但 是 如 果 你 是 要 面试 一 个 真正 的 客户 端 开 发 职位 ， 你 就 需要 积累 更 多 高 级 的 有 技巧 性 的 jQuery 问 


题 。 


题目 


1. jQuery 库 中 的 $() 是 什么 ? 
2. 网 页 上 有 5 个 
元 素 ， 如 何 使 用 jQuery 来 选择 它们 ? 
3. jQuery 里 的 ID 选择 器 和 class 选择 器 有 何不 同 ? 
4. 如 何在 点 击 一 个 按钮 时 使 用 jQuery 隐藏 一 个 图 片 ? 
5. $(document).ready() 是 个 什么 函数 ?为 什么 要 用 它 ? 
6. JavaScript window.onload 事件 和 jQuery ready WAAI [8] ? 
7. 如 何 找到 所 有 HTML select 标签 的 选中 项 ? 
8. jQuery 里 的 each() 是 什么 函数 ? 你 是 如 何 使 用 它 的 ? 
9. 你 是 如 何 将 一 个 HTML 元 素 添加 到 DOM 树 中 的 ? 
10. 你 能 用 jQuery 代码 选择 所 有 在 段落 内 部 的 超 链接 吗 ? 
11. $(this) 和 this 关键 字 在 jQuery 中 有 何不 同 ? 
12. 你 如 何 使 用 Query 来 提取 一 个 HTML 标记 的 属性 例如 . 链接 的 href? 
13. 你 如 何 使 用 jQuery 设置 一 个 属性 值 ? 
14. jQuery 中 detach() 和 remove) 方法 的 区 别 是 什么 ? 
15. 你 如 何 利 用 jQuery 来 向 一 个 元 素 中 添加 和 移 除 CSS 类 ? 
16. 使 用 CDN 加 载 jQuery 库 的 主要 优势 是 什么 ? 
17. jQuery.get() 和 jQuery.ajax() 方法 之 间 的 区 别 是 什么 
18. jQuery 中 的 方法 链 是 什么 ?使 用 方法 链 有 什么 好 处 3 
19. 你 要 是 在 一 个 jQuery 事件 处 理 程序 里 返回 了 false 会 怎样 ? 
20. 哪 种 方式 更 高 效 : document.getElementbyld("myld") 还 是 $("#myld") ? 


Jo MS 
参考 $t 料 


e 最 常见 的 20 个 jQuery 面试 问题 及 答案 


jQuery 面试 题 T 
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网 络 相 关 面 试题 


HTTP 


e 解释 下 XMLHttpRequest 
e Http 的 状态 码 
e Cache-control 


~ MN 
参考 Tr 料 


e 浅 谈 http 中 的 get 和 post 的 区 别 
e 计算 机 网 络 协议 赏析 -HTTP 
e 浏览 器 缓存 机 制 


网 络 相 关 面 试题 
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面试 题 集合 
基础 知识 


这 里 有 一 个 较为 完整 的 面试 流程 可 以 参考 : 


第 一 部 分 : Object Prototypes (对 象 原 型 ) 


刚 开始 很 简单 。 我 会 让 侯选人 去 定义 一 个 方法 ， 传 入 一 个 string 类 型 的 参数 ， 然 后 将 string 的 每 个 字符 间 加 个 空格 返回 ， 例 
如 : 


spacify('hello world') // => 'he llo world' 


尽管 这 个 问题 似乎 非常 简单 ， 其 实 这 是 一 个 很 好 的 开始 ， 尤 其 是 对 于 那些 未 经 过 电话 面试 的 候选 人 一 一 他 们 很 多 人 声称 精通 
JavaScript， 但 通常 连 一 个 简单 的 方法 都 不 会 写 。 
下 面 是 正确 答案 ， 有 时 候选 人 可 能 会 用 一 个 循环 ， 这 也 是 一 种 可 接受 的 答案 : 


function spacify(str) { 
retürnestr-split(5)7godin( 7 


} 


接 下 来 ， 我 会 问 侯选人 ， 如 何 把 这 个 方法 放 入 String 对 象 上 面 ， 例 如 : 


'hello world'.spacify(); 


问 这 个 问题 可 以 让 我 考察 侯选人 是 否 对 function prototypes( 方 法 原型 ) 有 一 个 基本 的 理解 。 这 个 问题 会 经 常 引起 一 些 有 意思 的 
讨论 : 直接 在 对 象 的 原型 (prototypes) 上 添加 方法 是 否 安全 ， 尤 其 是 在 Object 对 象 上 。 最 后 的 答案 可 能 会 像 这 样 : 


String.prototype.spacify = function()( 


retur his Spirt (SOS 57 
YN 


FJL, SORT Aib ABER FESTUS MRAR BS DX 31. 


第 二 部 分 : 参数 arguments 


下 一 步 我 会 问 一 些 简单 的 问题 去 考察 侯选人 是 否 理解 参数 (arguments) 对 象 。 我 会 让 他 们 定义 一 个 未 定义 的 log 方 法 作为 开 
始 : 


log('hello world') 


会 让 侯选人 去 定义 log， 然 后 它 可 以 代理 console.Ilog 的 方法 。 正 确 的 答案 是 下 面 几 行 代码 ， 其 实 更 好 的 候选 人 会 直接 使 用 
apply. 


function log(msg) { 
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console.log(msg); 


y 


他 们 一 且 写 好 了 ， 我 就 会 说 我 要 改变 我 调用 log 的 方式 ， 传 人 多 个 参数 。 我 会 强调 我 传人 参数 的 个 数 是 不 定 的 ， 可 不 止 两 个 。 
这 里 我 举 了 一 个 传 两 个 参数 的 例子 。 


log('hello', 'world'); 


希望 你 的 候选 人 可 以 直接 使 用 apply。 有 时 人 他 们 可 能 会 把 apply 和 call 搞 混 了 ， 不 过 你 可 以 提醒 他 们 让 他 们 微调 一 下 。 传 入 
console 的 上 下 文 也 非常 重要 。 


function log(){ 
console.log.apply(console, arguments); 


YN 


接 下 来 我 会 让 侯选人 给 每 一 个 log 消 息 添加 一 个 "(app)" 的 前 辍 ， 比 如 : 


'(app) hello world' 


现在 可 能 有 点 麻烦 了 。 好 的 侯选人 知道 arugments 是 一 个 伪 数 组 ， 然 后 会 将 他 转化 成 为 标准 数组 。 通 常 方 法 是 使 用 
Array.prototype.slice， 像 这 样 : 


function log(){ 
var args = Array.prototype.slice.call(arguments); 
args.unshift('(app)'); 


console.log.apply(console, args); 


u 


第 三 部 分 : EFX 


下 一 组 问题 是 考察 侯选人 对 上 下 文 和 this 的 理解 。 我 先 定义 了 下 面 一 个 例子 。 注 意 count 属 性 不 是 只 读 取 当前 下 下 文 的 。 





var User = ( 
Count 


getCount: function() { 
return this.count; 
J 
N 


我 又 写 了 下 面 几 行 ， 然 后 问 侯 选 人 log 输 出 的 会 是 什么 。 


console.log(User.getCount()); 


var func - User.getCount; 
console.log(func()); 


这 种 情况 下 ， 正 确 的 答案 是 1 和 undefined。 你 会 很 吃惊 ， 因 为 有 很 多 人 被 这 种 最 基础 的 上 下 文 问题 绊 倒 。func 是 在 winodw 的 
上 下 文中 被 执行 的 ， 所 以 会 访问 不 到 count 属 性 。 我 向 侯选人 解释 了 这 点 ， 然 后 问 他 们 怎么 样 保证 User 总 是 能 访问 到 func 的 上 
下 文 ， 即 返回 正 即 的 值 : 1 
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正确 的 答案 是 使 用 Function.prototype.bind， 例 如 : 


var func = User.getCount.bind(User); 
console.log(func()); 


接 下 来 我 通常 会 说 这 个 方法 对 老 版 本 的 浏览 器 不 起 作用 ， 然 后 让 侯选人 去 解决 这 个 问题 。 很 多 弱 一 些 的 侯选人 在 这 个 问题 上 
犯难 了 ， 但 是 对 于 你 来 说 屠 佣 一 个 理解 apply 和 call 的 侯选人 非常 重要 。 


Function.prototype.bind = Function.prototype.bind || function(context ){ 
var self = this; 


return function()( 
return self.apply(context, arguments); 
YN 
} 


第 四 部 分 : 弹出 窗口 (Overlay library) 


面试 的 最 后 一 部 分 ， 我 会 让 候选 人 做 一 些 实践 ， 通 过 做 一 个 ' 弹 出 窗口 ' 的 库 。 我 发 现 这 个 非常 有 用 ， 它 可 以 全 面 地 展示 一 名 前 
端 工 程 症 的 技能 : HTML,CSS 和 JavaScript。 如 果 修 选 人 通过 了 前 面 的 面试 ， 我 会 马上 让 他 们 回答 这 个 问题 。 


实施 方案 是 由 侯选人 自己 决定 的 ， 但 是 我 也 希望 他 们 能 通过 以 下 几 点 来 实现 : 


在 遮 罩 中 最 好 使 用 position 中 的 fixed 代 替 absolute 属 性 ， 这 样 即使 在 滚动 的 时 候 ， 也 能 始终 让 遮 罩 始 盖 住 整个 窗口 。 当 侯选人 
忽略 时 我 会 提示 他 们 这 一 点 ， 并 让 他 们 解释 fixed 和 absolute 定 位 的 区 别 。 


.overlay { 
position: fixed; 
left: 0; 
right: 0; 
bottom: 0; 
EOD 
background: rgba(0,0,0,.8); 


他 们 如 何 让 里 面 的 内 容 居中 也 是 需要 考察 的 一 点 。 一 些 侯选人 会 选择 CSS 和 绝对 定位 ， 如 果 内 容 有 固定 的 帘 、 高 这 是 可 行 
的 。 否 则 就 要 使 用 JavaScript. 


.overlay article { 
position: absolute; 
left: 50%; 
top: 5096; 
margin: -200px 0 O -200px; 
width: 400px; 
height: 400px; 


我 也 会 让 侯选人 确保 当 遮 罩 被 点 击 时 要 自动 关闭 ， 这 会 很 好 地 考查 事件 冒 泡 机 制 的 机 会 。 通 常 侯选人 会 在 overlay 上 面 直接 绑 
定 一 个 点 击 关 闭 的 方法 。 


$('.overlay').click(closeOverlay); 


这 是 个 方法 ， 不 过 直到 你 认识 到 点 击 窗口 里 面 的 东西 也 会 关闭 overlay 的 时 候 一 一 这 明显 是 个 BUG。 解 决 方法 是 检查 事件 的 触 
发 对 象 和 绑 定 对 象 是 否 一 致 ， 从 而 确定 事件 不 是 从 子 元 素 里 面 冒 上 来 的 ， 就 像 这 样 : 
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$(" .overlay').click(function(e){ 
if (e.target == e.currentTarget) 
closeOverlay(); 


35 


其 他 方面 
当然 这 些 问 题 只 能 覆盖 前 端 一 点 点 的 知识 的 ， 还 有 很 多 其 他 的 方面 你 有 可 能 会 问 到 ， 像 性 能 ，HTML5 API, AMD 和 


CommonJS 模 块 模型 ， 构 造 画 数 (constructors) ， 类 型 和 盒子 模型 (box model) 。 根 据 候选 人 的 情况 ， 我 经 常会 随机 提 些 


问题 。 


参考 


s% 


料 


e 5 Typical JavaScript Interview Exercises 

e Front-end-Developer-Interview-Questions 

e Front-end-Developer-Interview-Questions FP X fi 
。 最 全 前 端面 试问 题 及 答案 总 结 

e 前 端面 试 笔试 题 们 

e 前 端 笔试 面试 题 

e 前 端 开发 面试 题 大 收集 

e 收集 的 前 端面 试题 和 答案 
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主要 包含 一 些 站 点 和 次 
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~、 ~p> MIN 
信人 
图 书 资 料 


技能 图 谱 


The Web platform: Browser technologies 

web 开 发 技能 树 ,英文 : web 开 发 技能 树 ， 和 魔兽 世界 里 加 天 赋 类 似 的 效果 。 
Web 开发 技能 树 : 上 面 那个 的 中 文 版 ， 多 了 些 图 书 资 料 。 

JS Recipes: JavaScript tutorials for backend and frontend development. 


HTML 


学 习 CSS 布 局 

Dive Into HTML5 

HTML5 /CSS3 Tutorials 

常用 的 HTML5、CSS3 新 特性 能 力 检测 写法 


CSS 


scalable-css-reading-list:Collected dispatches from The Quest for Scalable CSS. 
css sharp 


JavaScript 


如 何 正确 学 习 JavaScript? 

JavaScript 秘 密 花 

You-Dont-Know-JS: A book series on JavaScript. @YDKJS on twitter. 

Eloquent JavaScript _ Annotated ECMAScript 5.1 

The Web platform: Browser technologies: 前 端 工 程 病 应 该 掌握 的 知识 点 。 

JavaScript 高 手 的 资源 装备 

ppk-on-javascript: 国外 博客 大 神 出 的 书 。 

Secrets of the JavaScript Ninja: 需要 自己 去 搜 pdf 版 本 。 

JavaScript Enlightenment (PDF) 

Learning Advanced JavaScript: by John Resig, the author of jQuery. If you master this one, you're almost done with the 
language. 

JavaScript The Right Way:An easy-to-read, quick reference for JS best practices, accepted coding standards, and 
links around the Web 

你 不 知道 你 不 懂 JS 


移动 端 JavaScript 学 习 资 料 


司徒 正美 的 移动 Web 学习 资料 
响应 式 Web 初 级 入 门 


Javascript 设 计 模 式 


JavaScript Patterns 


图 书 资料 243 
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e Learning JavaScript Design Patterns 


性 能 优化 (Web Performance Optimization) 


e awesome-wpo 
e superhero: 各 种 主题 文章 合集 。 


SVG 


e awesome-svg: Acurated list of SVG. 


部 署 问题 


e Afield guide to Static apps: 讲解 关于 静态 文件 部 署 。 


图 书 资 料 
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我 觉得 看 书 是 一 种 主动 的 过 程 ， 视 频 相 对 而 言 就 是 被 动 的 效果 ， 但 是 我 觉得 更 加 直接 ， 我 喜欢 。 


JavaScript 


gotoandlearn: 里 面 有 一 篇 关于 HTML5 Animation with TweenMax 的 讲解 。 
e imooc 关 于 JavaScript 的 教程 

e 极 客 学 院 上 关于 JavaScript 的 教程 

e 网 易 云 课堂 上 关于 JavaScript 的 教程 


视频 教程 245 
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` 
设计 相关 

e dribbble 

e codrops 

e smashingmagazine 

e codepen 

e InVision: 设计 作品 标注 ， 分 享 站 点 。 

e beautifulpixels 

e The Expressive Web 


设计 教程 
e HackDesign 


代码 相关 


e Font Awesome 
e COLORS: Anicer color palette for the web. 


育 景 图 片 


e geo pattern: svg 
e Trianglify 


效果 参考 


e Button effect 
e link effect 
e Direction-Aware Hover Effect 


设计 方向 246 
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JavaScript 库 


EAE 


e jQuery 
e zepto 
e Vanilla JS 


模块 加 载 管 理 


e requireJS 
e Melchior.js 
e webpack: 打包 为 静态 文件 ， 同 步 加载 。 


Ul € 


e polymer 
e react 


e riot 
片 加 载 

e lazysizes: High performance lazy loader for images . 
模板 引擎 

e nunjucks: mozilla! fho 

jQuery 插件 

e jQuery Plugins: 查询 jQuery 插件 。 
MVC/MMVC 


e VUe.js 
e Qmik: Qmik 是 一 个 面向 数据 接口 编程 ,代码 模块 化 ,mvc 式 的 开发 框架 ,数据 双向 趋 动 ,入 门 简单 ,jquery 语 法 ,快速 和 精简 , 功 
能 强大 的 无 线 端 JavaScript 库 , &1TE7G 2X imt 4s jquery, zepto,seajs,angulars,taskft 4- 4^ 38, mvc t B3 48 HE 2e. 


async 


e wind.js 


promise 
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e when 


e. 
x 


Bluebird: 这 个 类 库 除 了 兼容 Promise 规范 之 外 ， 还 扩展 了 取消 promise 对 象 的 运行 ， 取 得 promise 的 运行 进度 ， 以 及 错误 
处 理 的 扩展 检测 等 非常 丰富 的 功能 ， 此 外 它 在 实现 上 还 在 性 能 问题 下 了 很 大 的 功夫 。 


语言 识别 
e julius.js 
iframe 相 关 


e iframe-resizer: Keep same and cross domain iFrames sized to their content with support for window/content resizing, 
in page links, nesting and multiple iFrames. (Dependency free, IE8+) 


图 表 


e metricsgraphics.js 


SVG 


e SVG Morpheus 

Vivus 

e paper.js: 强大 的 矢量 图 形 绘制 库 。 
awesome-svg: A curated list of SVG. 


动画 相关 


e particles-js 

e Four Shadows: 添加 局 平 化 阴影 

e close-pixelate: 使 图 像 像 素 化 

e zynga/scroller: A pure logic component for scrolling/zooming. It is independent of any specific kind of rendering or 
event system. 

e nprogress: 进度 条 插件 。 

e Headroom.js: Give your pages some headroom. Hide your header until you need it. 


视差 滚动 


e skrollr: Stand-alone parallax scrolling library: 全 平台 视差 效果 插件 ， 纯 JS， 无 依赖 。 
Ab Ab 
功能 性 能 


e zip.js 

e Screenful.js: 使 得 任何 元 素 都 可 以 全 屏 

e Binoculars: 数据 捕获 的 库 。 

e draggabilly: Make that shiz draggable. 

e Sweetalert: A beautiful replacement for JavaScript's "alert". 


物理 引擎 


JS 库 248 
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e Matter.js: Matter.js is a 2D physics engine for the web. 


测试 相关 


T e MSN 
-人 ^ 
参考 资 米 


e 2014 年 12 月 最 棒 的 15 个 JavaScript 库 

e 前 端 常用 插件 汇总 

e 前 端 组 件 库 : 搭建 web app 常 用 的 样式 /组 件 等 收集 列表 (移动 优先 ) 
e 2015 JavaScript Frameworks in the Real World 


JS 库 


249 





前 端 工程 病 手 册 





e Bootstrap 
e Primer: github 的 css 框 架 
e purple: heroku 的 css 框 架 


CSS 相 关 库 
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Bootstrap 7: $ 


代码 片段 


e Bootsnipp: Code snippets for Bootstrap. 
e TODC Bootstrap: A Google-styled theme for Bootstrap. 


一 些 免费 的 主题 


e ShapeBootstrap 
e Bootstrap Zero 
e Start Bootstrap 


会 X VAN 
N ^ 
e z pu 


Bootstrap 3t Fl 251 
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移动 开发 


css 框 架 


e Bootstrap 
e Foundation 
e Semantic UI 
e Pure.css 

e Uikit 


js 库 


e appJs 

e touchstone.js: React.js powered UI framework for developing beautiful hybrid mobile apps. 

e frozenui: Frozen UI 是 一 个 开源 的 简单 易 用 ， 轻 量 快捷 的 移动 端 Ul 框 架 。 基 于 手 Q 样 式 规 范 ， 选 取 最 常用 的 组 件 ， 做 成 手 
Q 公 用 离线 包 减 少 请 求 ， 升 级 方式 友好 ， 文 档 完 善 ， 目 前 全 面 应 用 在 腾讯 手 Q 境 值 业务 中 。 

e Amaze: 中 国 首 个 开源 HTML5 跨 屏 前 端 框架 . 


e The 5 Most Popular Frontend Frameworks of 2014 Compared 
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Loading 动 男 


CSS 实 现 


e Sass 实 现 圆柱 体 加 载 动画 

e Sass 实 现 滚轮 加 载 动画 

e CSs3 实 现 局 平 风格 加 载 动画 1 
e Css3 实 现 局 平 风格 加 载 动画 2 


Loading 动 画 
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辅助 工具 
e 代码 运行 可 视 化 : 可 查看 出 运行 时 候 的 作用 域 。 
e JS Comparison Table: if, ==, === 各 种 对 上 比 情况 
e JSDB: The definitive source of the best JavaScript libraries, frameworks, and plugins. 
e JavascriptOO: every javascript project you should be looking into. 


e Favicon Generator: Generate favicons for PC, Android, iOS, Windows 8. 


e UI Box: 收集 Ul 相 关 的 代码 。 
性 能 优化 

e InstantClick: Makes your pages load instantly by pre-loading them on mouse hover. 
Z) È] 


e Hover: css3 实 现 动画 效果 
e AniCollection: 也 是 css3 实 现 的 按钮 动画 


正则 相关 


e 可 视 化 正则 表达 式 
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